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