js實現圖片輪播（終結版） - iriliguo－IT工程師數位筆記本

文章出處

 解決了一些bug，干脆就在這里面也對閉包總結了下下。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style type="text/css">  
        /*重置樣式*/  
        *{margin: 0;padding: 0; list-style: none;}
        /*wrap的輪播圖和切換按鈕樣式*/  
        .wrap{height: 445px;width: 100%; overflow: hidden;position: relative;}
        .wrap ul{position: absolute;}
        .wrap ul li{height: 445px;}
         .wrap ul li img {height: 445px;width: 100%;}
        .wrap ol{position: absolute;right: 10px;bottom: 10px;}
        .wrap ol li{height: 20px;width: 20px;  background-color:#fff;border: 1px solid #eee; margin-left: 10px;float:left; line-height: 20px; text-align: center;border-radius: 5px;}
        .wrap ol li.active{background-color: gray; color: #fff; border-radius: 5px; }
        .g_key img {  position: absolute;  top:165px;  cursor: pointer;  }
        #g_img1 {  left: 96.5%;  }
    </style>  
 </head>
 <body>
     <!-- wrap包裹錄播的圖片以及可點擊跳轉的按鈕 -->  
    <div class="wrap" id="wrap">
        <ul id="pic">  
             <li><img id="g_image1" src="image/1.jpg" alt=""></li>  
             <li><img src="image/2.jpg" alt=""></li>  
             <li><img src="image/3.jpg" alt=""></li>  
             <li><img src="image/4.jpg" alt=""></li>  
        </ul>  
        <ol id="list">  
            <li class="active">1</li>
            <li>2</li>  
            <li>3</li>  
            <li>4</li>  
        </ol>  
        <div class="g_key">
<img src="image/a.png" id="g_img1" >
<img src="image/b.png" id="g_img2" >
</div>
    </div>  
    <script type="text/javascript">
        window.onload=function () {
        var wrap=document.getElementById('wrap'),
            pic=document.getElementById('pic'),
            list=document.getElementById('list').getElementsByTagName('li'),
            index=1,//index=1避免第一張圖片停留時間過長問題
            timer=null;

            // 定義圖片切換函數
            function changeoptions(curindex){
                for(var j=0;j<list.length;j++){
                    list[j].className='';//循環清除之前的active樣式,只給當前元素active樣式
                }
                list[curindex].className='active';
                pic.style.top=-curindex*445+'px';

            }

    function autoplay(){
        changeoptions(index);
        index++;
        if(index>=list.length){
            index=0;
        }
    }
    timer=setInterval(autoplay,2000);
//圖片自動播放

     // 鼠標劃過整個容器時停止自動播放  
    wrap.onmouseenter=function(){
            clearInterval(timer);
      
        }
        // 鼠標離開整個容器時繼續播放至下一張
    wrap.onmouseleave=function(){
            timer=setInterval(autoplay,2000);
        }


     // 遍歷所有數字導航實現劃過切換至對應的圖片  
    /* for(var i=0;i<list.length;i++){
         list[i].id=i;
         list[i].onmouseover=function(){  
             clearInterval(timer);  
             changeoptions(this.id);
             }  
         }//在循環內使用閉包方法一：this是指循環到當前的list[i],如果this.id換位i,就只會取到循環結束的值*/

            for(var i=0;i<list.length;i++){
                list[i].onmouseover= (function(i) {
                    return function() {
                       clearInterval(timer);
                        changeoptions(i);
                    }
                })(i)
            }//在循環內使用閉包方法二：通過傳遞變量 i，在每個函數中都可以獲取到正確的索引
           /* for(var i=0;i<list.length;i++){
                list[i].onmouseover= (function(i) {
                    return function() {
                        clearInterval(timer);
                        changeoptions(i);
                    }
                }(i))
            }//在循環內使用閉包方法二：通過傳遞變量 i，在每個函數中都可以獲取到正確的索引*/

            /*for(let i=0;i<list.length;i++){
            list[i].onmouseover=function(){
            clearInterval(timer);
            changeoptions(i);
            }
            }//在循環內使用閉包方法三：ES6的let語法，它會創建一個新的綁定,每個方法都是被單獨調用
           */

            //點擊左右變換圖片
        var img1 = document.getElementById("g_img1");
        var img2 = document.getElementById("g_img2");
        img1.onclick=function () {
            clearInterval(timer);
            index--;
            if(index < 0){
                index = 3;
            }
            changeoptions(index);
        }
        img2.onclick=function () {
            clearInterval(timer);
            index++;
            if(index >3){
                index = 0;
            }
            changeoptions(index);
        }
        }
 </script>
 </body>
 </html>