js焦點輪播圖（網摘）

匯集網上焦點輪播圖的實現方式，自己試了下，不過鼠標懸浮停止動畫和鼠標離開動畫播放好像沒生效，不太明白，最后兩行代碼中，為什么可以直接寫stop和play。不用加括號調用函數么？求懂的大神指點！

所用知識點：

1.DOM操作

2.定時器

3.事件運用

4.Js動畫

5.函數遞歸

6.無限滾動大法(可以用js實現一個假圖的制作。不過說實話一直理解不了假圖的作用原理)

<style>
    * {
        margin: 0;
        padding: 0;

    }

    a {
        text-decoration: none;
    }

    body {
        padding: 20px;
    }

    #container {
        width: 600px; /*這里600x400是圖片的寬高*/
        height: 400px;
        border: 3px solid #333;
        overflow: hidden; /*隱藏溢出的圖片，因為圖片左浮動，總寬度為4200*/
        position: relative;
    }

    #list {
        width: 4200px; /*這里設置7張圖片總寬度*/
        height: 400px;
        position: absolute; /*基于父容器container進行定位*/
        z-index: 1;
    }

    #list img {
        float: left;
        width:610px;
    }

    #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>

<div id="container">
    <div id="list" >
        <img src="5.jpg" alt="1"/>
        <img src="1.jpg" alt="1"/>
        <img src="2.jpg" alt="2"/>
        <img src="3.jpg" alt="3"/>
        <img src="4.jpg" alt="4"/>
        <img src="5.jpg" alt="5"/>
        <img src="1.jpg" alt="5"/>
    </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:void(0);" id="prev" class="arrow">&lt;</a>
    <a href="javascript:void(0);" id="next" class="arrow">&gt;</a></div>

<script>
        window.onload = function(){
            var container=document.getElementById('container');
            var list=document.getElementById('list');
            var buttons=document.getElementById('buttons').getElementsByTagName('span');
            var next=document.getElementById('next');
            var prev=document.getElementById('prev');
            var index=1;

            var len=5;//圖片的數量
            var animated=false;//用于判斷切換是否進行
            var interval=3000; //自動播放定時器的秒數，3秒
            var timer; //定時器
//            切換動畫
            function animate(offset){
                animated=true; //切換進行中
                var time=300; //位移總時間
                var inteval=10; //位移間隔時間
                var speed=offset/(time/inteval); //每次位移量
                var newLeft=parseInt(list.style.left)+offset;
                var go=function(){
                    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,inteval);
                    }else{
                        animated=false;
                        list.style.left=newLeft+'px';
                        if(newLeft<-3000){
                            list.style.left=-600+'px';
                        }
                        if(newLeft>-600){
                            list.style.left=-3000+'px';
                        }
                    }
                }
                go();
                /*var newLeft=parseInt(list.style.left)+offset;
                list.style.left=newLeft+'px';
                if(newLeft<-3000){
                    list.style.left=-600+'px';
                }
                if(newLeft>-600){
                    list.style.left=-3000+'px';
                }*/
            }

//            為按鈕添加樣式
            function showButton(){
                for(var i=0;i<buttons.length;i++){
                    if(buttons[i].className=='on'){
                        buttons[i].className='';
                        break;
                    }
                }
                buttons[index-1].className='on';
            }
            next.onclick=function(){
                if(animated){
                    return;
                }
                if(index==5){
                    index=1;
                }else{
                    index+=1;
                }
                animate(-600);
                showButton();
            }

            prev.onclick=function(){
                if(animated){
                    return;
                }
                if(index==1){
                    index=5;
                }else{
                    index-=1;
                }
                animate(600);
                showButton();
            }

//            通過循環為按鈕添加點擊事件
            for(var i=0;i<buttons.length;i++){
                buttons[i].onclick=function(){
                    if(animated){
                        return;
                    }
//                    當繼續點擊當前按鈕的時候，不進行切換
                    if(this.className == 'on'){
                        return;
                    }
//                    通過獲取按鈕標簽的自定義屬性Index 得到索引值，再計算差值
                    var myIndex = parseInt(this.getAttribute('index'));
                    //真正的偏移量
                    var offset = -600*(myIndex-index);
                    animate(offset);
                    index=myIndex;
                    showButton();
                }
//                自動播放
                function play(){
                    timer=setTimeout(function(){
                        next.onclick();
                        play();
                    },interval)
                }
                function stop(){
                    clearTimeout(timer);
                }
                container.onmouseover=stop;
                container.onmouseout=play;

                play();
            }
        }
    </script>