关于焦点轮播图的总结

　　目前来讲，在各大网站都会使用到焦点轮播图，因为它占用地方少，交互性好，是前端设计必须要掌握的技能之一。

　　原理：使用三层嵌套，最里层装载图片，图片需要浮动。最里层设置相对定位。然后再使用JavaScript设置一个定时器，每过一段时间便让最里层的块的left值改变。

而第二层则需要设置overflow：hidden；这个属性，否则将会导致这个层被子层撑大。不美观。

　　

此图便为实现效果图。

　　下面先讲一讲如何布局。

　　

　　首先布局分为三大块，一块为inner，包裹住所有的图片；一块为outer，决定展示的窗口；两个a标签为左右箭头；pagination块则包裹着下面的每一小块span标签；

wrap是最外面的块，控制着整个轮播图的位置。

　　然后，设置相关的样式。如图：

html,body,div,img,a,span{
    margin:0;
    padding:0;
}
a{
    text-decoration: none;
    color:black;
}
.wrap{
    width:510px;
    margin:20px auto;
}
#outer{
    width:510px;
    overflow: hidden;
    position: relative;
    left:0;
    top:0;
}
#inner{
    width:9999px;
    position: relative;
    left:0;
    top:0;
    overflow: hidden;
}
#inner img{
    float:left;
}
#outer a{
    position: absolute;
    width:30px;
    height:30px;
    font-size: 30px;
    text-align: center;
    line-height: 30px;
    top:50%;
    margin-top: -15px;
    background-color: #ccc;
    opacity: 0;
    filter: alpha(opacity=0);
}
#outer .active{
    background-color: #9f9f9f;
}
#outer:hover a{
    opacity: 0.6;
    filter: alpha(opacity=60);
}
#outer .leftGo{
    left:0;
}
#outer .rightGo{
    right:0;
}
#pagination{
    position: absolute;
    bottom: 20px;
    width:100%;
    text-align: center;
}
#pagination span{
    display: inline-block;
    width:30px;
    height:30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: #fbfbfb;
    opacity: 0.6;
    filter: alpha(opacity=60);
    cursor: pointer;
    -webkit-user-select: none;
}

　　至此，相关的设置就完成了。

　　但是在此过程中有一些问题需要注意：

　　1.计时器在每次调用之前必须清除，否则当有多个事件触发的时候计时器会叠加，从而会越走越快。

　　2.一些重复的代码没必要重复写，应该要封装到函数里面去。

　　3.当对多个相同的元素进行操作时，注意不要让数组越界。 

　　4.要考虑兼容性问题

　　5.要注意代码的格式化。

　　

var inner = document.getElementById("inner");
    var imgArr =inner.getElementsByTagName("img");
    var spanArr = document.getElementById("pagination").getElementsByTagName("span");
    var leftGo = document.getElementById("outer").getElementsByTagName("a")[0];
    var rightGo = document.getElementById("outer").getElementsByTagName("a")[1];
    var picWidth = imgArr[0].offsetWidth;//获取第一站图片的宽度
    var index = 0;
    var timer = null;
    var AutoTimer = null;
timer = setInterval(AutoGo,2000);//设置计时器
    leftGo.onclick=function(){
        Goleft();//点击左边的小箭头
    };
    rightGo.onclick = function(){
        Goright();//点击右边的小箭头
    };
    inner.onmouseover=function(){
        clearInterval(timer);//鼠标移入，清除计时器
    }
    inner.onmouseleave=function(){
    timer = setInterval(AutoGo,2000);//鼠标移出，启动计时器
    }
    function AutoGo(){
        //自动轮播
        var start =inner.offsetLeft;//距离左边的边框的长度
        var end = - index * picWidth;//终点
        var moveDistance = end - start;
        var speed = 20;//要走的步数
        var speedCount = 0;
        clearInterval(AutoTimer);
            //清除之前的计时器，否则会越走越快
        clearInterval(timer);
        AutoTimer = setInterval(function(){
            speedCount++;
            if(speedCount >=speed){
                            //步数足够
                clearInterval(AutoTimer);
                clearInterval(timer);
                timer = setInterval(Goright,1000);
                //再次启动计时器
            }
            inner.style.left = moveDistance *     speedCount/speed +start+"px";
//每步要走的距离
        },100)
        for(var i = 0 ; i<spanArr.length;i++){
                    //下标的样式改变，以及点击事件的绑定
            spanArr[i].index = i;
            spanArr[i].className="";
            spanArr[index].className="active";
            spanArr[i].onclick =function(){
                index=this.index;//传递当前点击的位置
                AutoGo();
            }
        }
    }
    function Goleft(){
        //往左走一步;
        index--;
        if(index<0){
            index =imgArr.length-1;
        }
        AutoGo();
        
    }
    
    function    Goright(){
        //往右走一步
        index++;
        if(index>imgArr.length-1){
            index =0;
        }
        AutoGo();
    }

 如若转载，请说明出处，谢谢