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

文章出處


這次解決了之前點擊左右鍵有時候出現的遲滯問題。

 <!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: 97%;
        }
    </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" onclick = "changeImg('next')">
<img src="image/b.png" id="g_img2" onclick = "changeImg('pre')">
</div>
    </div>  
    <script type="text/javascript">
        var wrap=document.getElementById('wrap'),
            pic=document.getElementById('pic'),
            list=document.getElementById('list').getElementsByTagName('li'),
            index=0,
            timer=null;
        function changeoptions(curindex){
            for(var j=0;j<list.length;j++){
                list[j].className='';
                pic.style.top=0;

            }
            list[curindex].className='active';
            pic.style.top=-curindex*445+'px';
            index=curindex;

        }
      // 定義并調用自動播放函數  
      if(timer){
          clearInterval(timer);  
          timer=null;  
      }
   // 定義圖片切換函數  
    function autoplay(){
        index++;
        if(index>=list.length){
            index=0;
        }
        changeoptions(index);

    }
         timer=setInterval(autoplay,2000);


     // 鼠標劃過整個容器時停止自動播放  
    wrap.onmouseenter=function(){
             console.log("進入了，定時器關閉了");
            clearInterval(timer);
      
        }
        // 鼠標離開整個容器時繼續播放至下一張
    wrap.onmouseleave=function(){
            console.log("離開了，定時器開始了");
            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);  
               
             }  
         }

        function changeImg(which){

            if(which == 'pre'){
               index--;
                if(index < 0){
                    index = 3;
                }
            }
            else{
                index++;
                if(index >3){
                    index = 0;
                }
            }

            changeoptions(index);
          console.log(index);
        }//點擊左右變換圖片


 </script>
 </body>
 </html>