這篇文章將為大家詳細(xì)講解有關(guān)JavaScript中圖片庫(kù)的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)，專注為中小企業(yè)提供官網(wǎng)建設(shè)、營(yíng)銷型網(wǎng)站制作、成都響應(yīng)式網(wǎng)站建設(shè)、展示型成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作等服務(wù)，幫助中小企業(yè)通過網(wǎng)站體現(xiàn)價(jià)值、有效益。幫助企業(yè)快速建站、解決網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷推廣問題。

一、一個(gè)javascript 圖片庫(kù)實(shí)例，下面是效果圖

點(diǎn)擊頂部導(dǎo)航，會(huì)在本頁(yè)面進(jìn)行刷新圖片，然后，在底部會(huì)顯示文本的變化

二、下面是代碼

1、gallery.html代碼

  
    
    
    
    
  
  
    
Snapshots
    

      

        紅色楓葉
      
      

        黃色楓葉
      
      

        紅色樹
      
      

        藍(lán)色楓葉
      
    
    
    Choose an image

  

2、showPics.js代碼

function showPic(whichpic){
  var sorce=whichpic.getAttribute("href");
  var placeholder=document.getElementById("placeholder");
  placeholder.setAttribute("src",sorce);
  var text=whichpic.getAttribute("title");
  var description=document.getElementById("description");
  description.firstChild.nodeValue=text;
}

3、layout.css代碼

img{
  width: 600px;
}
body{
  font-family: helvetica,arial,serif;
  color: #333;
  background-color: #ccc;
  margin: 1em 10%;
}
h2{
  color:#333;
  background-color: transparent;
}
a{
  color: #c60;
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
}
ul{
  padding: 0;
}
li{
  float: left;
  padding: 1em;
  list-style: none;
}
img{
  display: block;
  clear: both;
}

三、幾個(gè)新的DOM屬性

1、childNodes

獲得 body 元素的子節(jié)點(diǎn)集合：

document.body.childNodes;

2、nodeType

獲得 body 元素的節(jié)點(diǎn)類型：

document.body.nodeType;

3、nodeValue

nodeValue 屬性設(shè)置或返回指定節(jié)點(diǎn)的節(jié)點(diǎn)值。

4、firstChild、lastChild

firstChild 屬性返回指定節(jié)點(diǎn)的首個(gè)子節(jié)點(diǎn)，以 Node 對(duì)象。

lastChild 屬性返回指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)，以 Node 對(duì)象。

關(guān)于“JavaScript中圖片庫(kù)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站欄目：JavaScript中圖片庫(kù)的示例分析-創(chuàng)新互聯(lián)
文章起源：http://weahome.cn/article/ehphd.html