用原生js實現圖片輪播器

輪播器是指圖片的迴圈播放：主要涉及的知識點有：DOM操作，定時器，事件繫結等；

如下圖：總共有5張圖片進行輪播，

程式碼如下：

html部分：

<div id="container">
                        <div id="list" style="left:-1200px;">        //left=-1200px表示此刻正在顯示第一張圖片
                             <img src="images/05.jpg" alt="5" />
                             <img src="images/01.jpg" alt="1" />
                             <img src="images/02.jpg" alt="2" />
                             <img src="images/03.jpg" alt="3" />       // 輪播器所需圖片
                             <img src="images/04.jpg" alt="4" />
                             <img src="images/05.jpg" alt="5" />
                             <img src="images/01.jpg" alt="1" />
                         </div>
                         <div id="buttons">
                             <span index="1" class="on"></span>
                             <span index="2"></span>
                             <span index="3"></span>                //圖示
                             <span index="4"></span>
                             <span index="5"></span>
                         </div>
                         <a href="javascript:;" id="prev" class="arrow"><</a>    //左右鍵按鈕
                         <a href="javascript:;" id="next" class="arrow">></a>
  </div>

css部分：

*{
    margin:0;
    padding:0;

}
#container {
    width: 1200px;
    height:460px;
    overflow: hidden;
    margin-left: 80px;
    position: relative;
}
#list {
    position: absolute;
    z-index: 1;
    width: 8400px;
    height: 460px;
}
#list img {
    float: left;
    width: 1200px;
    height: 460px;

}
#buttons {
    position: absolute;
    right: 50px;
    bottom: 20px;
    z-index: 2;
    height: 10px;
    width: 100px;
}

#buttons span {
    float: left;
    margin-right: 5px;
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
}

#buttons .on {
    background: orangered;
}
.arrow {
    position: absolute;
    top: 200px;
    z-index: 2;
    display: none;
    width: 50px;
    height: 50px;
    font-size: 36px;
    /*font-weight: bold;*/
    line-height: 39px;
    text-align: center;
    color: #fff;
    background-color: RGBA(0, 0, 0, .3);
    /*cursor: pointer;*/
}

.arrow:hover {
    background-color: RGBA(0, 0, 0, .7);
}
a{
    text-decoration: none;
}

#container:hover .arrow {
    display: block;
}

#prev {
    left:220px;
}
#next {
    right: 0px;
}

js部分：

/**
 * Created by Administrator on 2018/3/8.
 */
window.onload=function(){
    var container=document.getElementById('container');
    var list = document.getElementById('list');
    var buttons = document.getElementById('buttons').getElementsByTagName('span');
    var prev = document.getElementById('prev');
    var next = document.getElementById('next');
    var timer;
    var index = 1;
             function animate(offset) {
                        //獲取的是style.left，是相對左邊獲取距離，所以第一張圖後style.left都為負值，
                         //且style.left獲取的是字串，需要用parseInt()取整轉化為數字。
                         var newLeft = parseInt(list.style.left) + offset;
                         list.style.left = newLeft + 'px';
                       //無限滾動判斷
                      if (newLeft > -1200) {
                                 list.style.left = -6000 + 'px';
                             }
                      if (newLeft < -6000) {
                                list.style.left = -1200 + 'px';
                            }
                   }

                 function play() {
                        //重複執行的定時器
                        timer = setInterval(function() {
                              next.onclick();
                             }, 5000)
                     }

               function stop() {
                        clearInterval(timer);
                     }

                function buttonsShow() {
                        //將之前的小圓點的樣式清除
                     for (var i = 0; i < buttons.length; i++) {
                               if (buttons[i].className == "on") {
                                         buttons[i].className = "";
                                     }
                             }
                        //陣列從0開始，故index需要-1
                         buttons[index - 1].className = "on";
                    }

                prev.onclick = function() {
                         index = index-1;
                        if (index == 1) {
                                 index = 5
                             }
                        buttonsShow();
                         animate(1200);
                    };

                next.onclick = function() {
                         //由於上邊定時器的作用，index會一直遞增下去，我們只有5個小圓點，所以需要做出判斷
                         index=index+ 1;
                         if (index == 5) {
                                index = 1
                         }
                        animate(-1200);//向右移動每次移動-1200px
                        buttonsShow();
                    };

               for (var i = 0; i < buttons.length; i++) {
                      (function(i) {
                                buttons[i].onclick = function() {

                                    /*   這裡獲得滑鼠移動到小圓點的位置，用this把index繫結到物件buttons[i]上，去谷歌this的用法  */
                                    /*   由於這裡的index是自定義屬性，需要用到getAttribute()這個DOM2級方法，去獲取自定義index的屬性*/
                                    var clickIndex = parseInt(this.getAttribute('index'));
                                    var offset = 1200 * (index - clickIndex); //這個index是當前圖片停留時的index
                                    animate(offset);
                                    index = clickIndex; //存放滑鼠點選後的位置，用於小圓點的正常顯示
                                    buttonsShow();
                                }
                      })(i)
               }

                 container.onmouseover = stop;
                 container.onmouseout = play;
                 play();

};