JavaScript中圖片庫的示例分析

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

創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)與策劃設(shè)計(jì),巴南網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:巴南等地區(qū)。巴南做網(wǎng)站價(jià)格咨詢:028-86922220

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

點(diǎn)擊頂部導(dǎo)航，會(huì)在本頁面進(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中圖片庫的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

本文名稱：JavaScript中圖片庫的示例分析
網(wǎng)頁網(wǎng)址：http://m.jiaotiyi.com/article/ggjcsi.html