javascript實現的焦點圖輪播效果詳解

antzone發表於2017-04-07
JavaScript

本章節分享一段程式碼例項，它實現並不完善的焦點圖輪播效果。

但是也實現了基本的功能，就當是我們對於一些知識的學習，總之一個完善的功能都是由零碎的小功能實現的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
ul, li{
  list-style:none;
}
.mid{
  margin:0 auto;
}
.area{
  width:240px;
  height:270px;
  overflow:hidden;
  background:#999;
  margin-top:150px;
  position:relative;
}
#pic_list{
  position:relative;
}
#pic_list li{
  position:absolute;
  visibility:hidden;
}
#pic_list li.show{
  visibility:visible;
}
#pic_list li img{
  vertical-align:middle;
}
.button{
  width:240px;
  height:20px;
  line-height:20px;
  background:#ccc;
  position:absolute;
  bottom:0px;
}
#button{
  float:right;
}
#button li{
  float:left;
  width:20px;
  height:20px;
  text-align:center;
  margin:0 3px;
  font-family:"Arial";
  font-size:12px;
  color:#fff;
  background:#000;
}
#button li.current{
  background:#f00;
  cursor:pointer;
}
</style>
</head>
<body>
<div class="area mid">
  <div id="imgbox">
    <ul id="pic_list">
      <li class="show" id="one"><img src="img/1.jpg" width="240" alt="one" /></li>
      <li id="two"><img src="img/2.jpg" width="240" alt="two" /></li>
      <li id="three"><img src="img/3.jpg" width="240" alt="three" /></li>
      <li id="four"><img src="img/4.jpg" width="240" alt="four"  /></li>
      <li id="five"><img src="img/5.jpg" width="240" alt="five" /></li>
    </ul>
  </div>
  <div class="button">
  <ul id="button">
    <li class="current" id="but_one">1</li>
    <li id="but_two">2</li>
    <li id="but_three">3</li>
    <li id="but_four">4</li>
    <li id="but_five">5</li>
  </ul>
</div>
</div>
<script type="text/javascript">
(function(){
  var imgbox = document.getElementById("imgbox");
  var pic_list = document.getElementById("pic_list");
  var pics = pic_list.getElementsByTagName("li");
  var button = document.getElementById("button").getElementsByTagName("li");
  var p;
  function autoplay(start){
    for(index=start;index<button.length;index++){
      (function(){
        var p=index;
        button[index].onmouseover=function change(){
          for(j=0;j<this.parentNode.childNodes.length;j++){
            this.parentNode.childNodes[j].className="";
          }
          this.className="current";
          for(m=0;m<pics.length;m++){
            pics[m].className="";
            if(m==p){
              pics[m].className="show";
            }
          }
        }
      })();
    }
  }
  autoplay(0);
})();
</script>
</body>
</html>

上面的程式碼實現了簡單的輪播效果，但是不能夠自己進行輪播，只能滑鼠懸浮才能夠實現切換。

好在我們就當做對知識的學習，對於實際應用的話此程式碼還需要完善，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.(function(){})()，一個匿名自執行函式。

（2）.var imgbox = document.getElementById("imgbox")，獲取id屬性值為imgbox的元素物件。

（3）.var pic_list = document.getElementById("pic_list")，獲取id屬性值為pic_list的元素物件。

（4）.var pics = pic_list.getElementsByTagName("li")，獲取pic_list下的li元素集合，也就是放置圖片的地方。

（5）.var button = document.getElementById("button").getElementsByTagName("li")，獲取底部數字按鈕集合。

（6）.var p,宣告一個變數用來儲存當前數字按鈕的索引。

（7）.function autoplay(start){}，此函式實現了各種輪播準備工作，比如事件處理函式的繫結,引數規定從哪個圖開始輪播。

（8）.for(index=start;index<button.length;index++){}，遍歷每一個數字按鈕元素。

（9）.(function(){})()，一個匿名自執行函式，使用這個方式實現了閉包效果，p儲存的就是當前元素額索引。

（10）.var p=index,把當前元素索引賦值給變數p。

（11）.button[index].onmouseover=function change(){}，為按鈕註冊onmouseover事件處理函式。

（12）.for(j=0;j<this.parentNode.childNodes.length;j++){

  this.parentNode.childNodes[j].className="";

}，遍歷按鈕元素，然後將按鈕元素的class屬性值清空。

（13）.this.className="current",設定當前按鈕的class屬性值為current。

（14）.for(m=0;m<pics.length;m++){

  pics[m].className="";

  if(m==p){

    pics[m].className="show";

  }

},遍歷每一個存放圖片的li元素，然後清空元素的class屬性值。

然後設定對應的索引的圖片li元素class屬性值為show，這樣圖片就可以顯示。

二.相關閱讀:

（1）.getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。

（2）.onmouseover事件可以參閱javascript mouseover事件一章節。

（3）.parentNode可以參閱parentNode一章節。

（4）.className可以參閱js className一章節。

相關文章