js自動切換輪播圖

思路：左右切換——左右切換（加上小圓點）——小圓點點擊——動畫效果——自動切換

html:

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="images/55.jpg" alt="1">
        <img src="images/11.jpg" alt="1">
        <img src="images/22.jpg" alt="2">
        <img src="images/33.jpg" alt="3">
        <img src="images/44.jpg" alt="4">
        <img src="images/55.jpg" alt="5">
        <img src="images/11.jpg" alt="5">
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2" class=""></span>
        <span index="3" class=""></span>
        <span index="4" class=""></span>
        <span index="5" class=""></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

css

<style type="text/css">
    *{ margin: 0; padding: 0; text-decoration: none;}
    body { padding: 20px;}
    #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
    #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
    #list img { float: left;}
    #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
    #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
    #buttons .on {  background: orangered;}
    .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
    .arrow:hover { background-color: RGBA(0,0,0,.7);}
    #container:hover .arrow { display: block;}
    #prev { left: 20px;}
    #next { right: 20px;}
</style>

js

window.onload=function(){


        var container=document.getElementById('container')//獲取容器id
        var list=document.getElementById('list')//獲取img容器
        var buttons=document.getElementById('buttons').getElementsByTagName('span')//獲取點
        var prev=document.getElementById('prev')//左按鈕
        var next=document.getElementById('next')//右按鈕
        var animated=false
        var index=1;//小圓點
        var timer;//定時器


        //小圓點
        function showButton(){
            //對點點循環，去除已經有的on
            for(var i=0;i<buttons.length;i++){
                if(buttons[i].className=='on'){
                    buttons[i].className=''
                    break//退出循環
                }
            }
            buttons[index-1].className='on'
        }
        function animate(offset){
//            快速點擊時，會出現小圓點和圖片不對應的情況，解決方案是當圖片處於動畫狀態時，直接屏蔽掉點擊事件
            animated=true// 快速點擊時，會出現小圓點和圖片不對應的情況，解決方案是當圖片處於動畫狀態時，直接屏蔽掉點擊事件
            var newLeft=parseInt(list.style.left)+offset

            //焦點圖輪播
            var time=300;//位移總時間
            var interval=10;//位移間隔時間
            var speed=offset/(time/interval)//每次位移量
            function go(){
                if(speed<0&&parseInt(list.style.left)>newLeft||(speed>0&&parseInt(list.style.left)<newLeft)){
                    list.style.left=parseInt(list.style.left)+speed+'px'
                    setTimeout(go,interval)
                }else{
                    animated=false;// 快速點擊時，會出現小圓點和圖片不對應的情況，解決方案是當圖片處於動畫狀態時，直接屏蔽掉點擊事件
                    list.style.left=newLeft +'px' //轉成數字600
                    //判斷是否l滾動到輔助圖,圖片滾動在-600和-3000之間,解決空白問題
                    if(newLeft>-600){
                        list.style.left=-3000+'px'
                    }
                    if(newLeft<-3000){
                        list.style.left=-600+'px'
                    }
                }
            }
            go()

        }
        //自動切換
        function play(){
            timer=setInterval(function(){
                next.onclick()
            },3000);
        }
        //停止切換
        function stop(){
            clearInterval(timer)
        }
        //右箭頭
        next.onclick=function(){
            //判斷點點是否是最后一個或者第一個
/*            if(index==5){
                index=1;
            }else{
                index+=1;
            }*/
            index += 1;
            index = index > 5 ? 1 : index;
            showButton()
            //+600和-600當做參數傳給animate
//            list.style.left=parseInt(list.style.left)-600 +'px' //把字符串變為整數值，paresInt()只保留字符串中的數字
            if(!animated){
                animate(-600)
            }
        }
        //左箭頭
        prev.onclick=function(){
           /* if(index==1){
                index=5;
            }else{
                index-=1;
            }*/
            index -= 1;
            index = index < 1 ? 5 : index;
            showButton()
//            list.style.left=parseInt(list.style.left)+600+'px'
            if(!animated){
                animate(600)
            }
        }
        //小圓點加事件
        for(var i=0;i<buttons.length;i++){
            buttons[i].onclick=function(){
//                if(this.className=='on'){
//                    return;
//                }
                var myIndex=parseInt(this.getAttribute('index'))//獲取當前點點的index
                var offset=-600*(myIndex-index) //移動的距離：當前的index-之前的index
                //恢復小圓點位置
                index=myIndex
                showButton()
                if(!animate){
                    animate(offset)
                }
            }
        }
        //鼠標移上去，觸發自動切換事件
        container.onmouseover=stop;//不要加括號，
        container.onmouseout=play
        //自動切換
        play()
    }