Javascript實現(xiàn)單張圖片瀏覽
更新時間：2014年12月18日 10:50:23 投稿：hebedich
這篇文章主要介紹了Javascript實現(xiàn)單張圖片瀏覽，非常的簡單，是學習javascript時練手用的，跟我一樣的菜鳥看看吧，大神請略過
利用空閑時間，學習JavaScript語言時寫了一個鏈接瀏覽單張圖片的例子：
復制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Image Gallery </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
</HEAD>
<script language="javascript">
function showPic(whichpic){
var source=whichpic.getAttribute("href");//獲取當前點擊的元素的屬性href的值
var placeholder=document.getElementById("placeholder");//獲取目標
placeholder.setAttribute("src",source);//設置目標的屬性src,從而達到改變圖片
var text=whichpic.getAttribute("title");//獲取當前點擊的元素的屬性title的值
var description=document.getElementById("description");
description.firstChild.nodeValue=text;//把點擊元素的標題賦給<p>
//或者 description.childNodes[0].nodeValue=text;
}
</script>
<BODY>
<h1>Javascript 圖片館</h1>
<ul>
<li>
<a href="images/fireworks.jpg" title="Image1" onclick="showPic(this); return false;">圖片一</a>
</li>
<li>
<a href="images/coffee.jpg" title="Image2" onclick="showPic(this); return false;">圖片二</a>
</li>
<li>
<a href="images/rose.jpg" title="Image3" onclick="showPic(this); return false;">圖片三</a>
</li>
<li>
<a href="images/bigben.jpg" title="Image3" onclick="showPic(this); return false;">圖片四</a>
</li>
</ul>
<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
<p id="description">選擇圖片.</p>
</BODY>
</HTML>
注意：
在標簽 <a></a> 上加事件我們要注意，避免使它執(zhí)行跳轉。
解決方法：函數(shù)返回false； 事件認為鏈接沒有被點擊。
如果href的值是javascript:void(0);也可以不跳轉。
相關文章
這篇文章主要為大家介紹了GoJs圖形繪圖模板Shape示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
修復ie8&chrome下window的resize事件多次執(zhí)行
window.onresize 事件 專用事件綁定器 v0.1,用于解決 lte ie8 & chrome 及其他可能會出現(xiàn)的 原生 window.resize 事件多次執(zhí)行的 BUG.2011-10-10
學習C#的朋友都知道format()這個方法，本文給大家介紹在javascript中如何實現(xiàn)此操作，js模擬C#字符串格式化操作，需要的盆友一起學習吧2015-08-08
本篇文章主要是對JS刷新當前頁面的幾種方法進行了詳細的總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
在ES6中新增了函數(shù)的簡寫方式----箭頭函數(shù)，箭頭函數(shù)的出現(xiàn)不僅簡化了大量代碼，也讓代碼看起來更加優(yōu)雅，同時也解決了this指向問題，下面我們就來詳細講解如何玩轉箭頭函數(shù)2022-09-09
javascript九宮格圖片隨機打亂位置的實現(xiàn)方法
這篇文章主要為大家詳細介紹了javascript九宮格圖片隨機打亂位置的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要給大家介紹了關于js面試題之異步問題的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
這篇文章主要介紹了JavaScript計時器示例分析,需要的朋友可以參考下2015-02-02
本篇文章主要介紹了webpack異步加載業(yè)務模塊 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
今天發(fā)表一個自己剛學js的練習，javascript五圖輪播切換---實用版，這個實力有個缺陷就是沒有過渡效果，這個本人也還在研究中，也希望高手可以指點一下2012-08-08