JavaScript焦点轮播图

在慕课学习了JavaScript焦点轮播图特效，在此做一个整理。

首先是html结构，我用的是本地同文件夹下的三张图片，多出来的第一张（pic3副本）和最后一张图片（pic1副本）是为了实现无缝切换效果。通过设置div容器的left值来实现图片切换时，当轮播到pic3需要切换到pic1时，最后一张图片（也就是pic1副本）被切换进来，此时left值已经为-1600px，并且同时我们又将其left值改为-400px，这样就回到了真正的第一张图pic1。：

<div id="container">
        <div id="pic" style="left:-400px">
            <div><a href="javascript:;"><img src="DSC02637.jpg" alt="pic3copy"></a></div>
            <div><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1"></a></div>
            <div><a href="javascript:;"><img src="DSC01628.jpg" alt="pic2"></a></div>
            <div><a href="javascript:;"><img src="DSC02637.jpg" alt="pic3"></a></div>
            <div><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1copy"></a></div>
        </div>
        <ul id="position">
            <li class="cur"></li>
            <li class=""></li>
            <li class=""></li>
        </ul>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>

    </div>

css样式

*{ 
             margin: 0;
             padding: 0; 
             text-decoration: none;
         }

        #container{
            position: relative;
            width: 400px;
            height: 200px;
            overflow: hidden;/*隐藏溢出的图片*/
        }
        #pic{
            width:2000px;/*5张图的宽度*/
            position: absolute;/*基于父容器进行定位*/

        }
        #pic div{
            float: left;
            background: #5dd94e;
        }
        #pic div img{
            width: 400px;
            height: 200px;
        }
        #position{
            position: absolute;
            bottom: 0;
            right:0;
            margin: 0;
            background: #000;
            opacity: 0.4;
            width: 400px;
            text-align: center;
        }
        #position li{
            width: 10px;
            height: 10px;
            margin:0 2px;
            display: inline-block;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            background-color: #afafaf;
        }
        #position .cur{
            background-color: #ff0000;
        }

         .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: 80px; 
              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;
        }

JavaScript

window.onload=function(){
            var container=document.getElementById("container");
            var pic=document.getElementById("pic");
            var btns=document.getElementById("position").getElementsByTagName("li");
            var prev=document.getElementById("prev");
            var next=document.getElementById("next");
            var flag=false;
            var index=0;//小圆点索引
            for (var i = 0; i < btns.length; i++) {
                btns[i].index=i;
            }
            //控制小圆点显示
            function showBtn(index){
                for (var i = 0; i < btns.length; i++) {
                    if(btns[i].className=='cur'){
                        btns[i].className='';
                        break;
                    }
                    
                }
                btns[index].className="cur";
            }
            //向右滑动index+1，index>2,即从最后一张切换到第一张时，index置为0
            //flag为true标识正在切换
            next.onclick=function(){
                if(flag){
                    return;
                }
                index++;
                index = index > 2 ? 0 : index;
                showBtn(index);
                if(!flag){
                    animate(-400);
                }
            }
            prev.onclick=function(){
                if(flag){
                    return;
                }
                index--;
                index = index < 0 ? 2 : index;
                showBtn(index);
                if(!flag){
                    animate(400);
                }
            }
            function animate(offset){
                flag=true;
                var newLeft=parseInt(pic.style.left) + offset ;
                
                var time=300;//位移总时间
                var interval=10;//位移间隔时间
                var speed=offset/(time/interval);//每次位移量
                //平滑移动
                function go(){
                    if ( (speed > 0 && parseInt(pic.style.left) < newLeft) || (speed < 0 && parseInt(pic.style.left) > newLeft)) {
                        pic.style.left = parseInt(pic.style.left) + speed + 'px';
                        setTimeout(go, interval);
                    }
                    else{
                        flag=false;
                        pic.style.left = newLeft+ "px";
                        if(newLeft > -400 ){
                            pic.style.left = -1200 + "px";
                        }
                        if(newLeft < -1200 ){
                            pic.style.left = -400 + "px";
                        }
                    }

                }
                go();
                
            }
            //小圆点点击事件
            for (var i = 0; i < btns.length; i++) {
                btns[i].onclick=function (){
                    if (flag) {
                        return;
                    }
                    //点击当前轮播图片则不继续执行
                    if(this.className=="cur"){
                        return;
                    }
                    var myIndex=this.index-index;
                    var offset=-400*myIndex;
                    index=this.index;
                    showBtn(index);
                    animate(offset);
                    
                    
                }
            }
            //自动播放
            function play() {
                timer = setTimeout(function () {
                    next.onclick();
                    play();
                }, 2000);
            }
            function stop() {
                clearTimeout(timer);
            }    
             container.onmouseover = stop;
            container.onmouseout = play;

            play();



        }