轮播图实现原理

0.最终效果预览

鼠标未触及区域时（自动滚动中）

鼠标触及区域后 （停止滚动，显示按钮）

基本功能

• 自动无缝滚动
• 左右按钮控制滚动
• 点击圆点切换图片

1.整体结构与思路

Html部分

    

        

            

                

                

                

                

                

            
            

        
        

            <
            >
        
    

三个div，最外层id为parent的大div内包含了uls和buttons两个div，divuls中包含了两个列表img_ul（图片列表）, litCir_ul（小圆点列表），divbuttons里则包含了“左”， “右”两个按钮。

CSS部分

#parent{
    position: relative;
    margin: 50px auto;
    padding: 0;
    width: 500px;
    height: 309px;
}

#uls{
    position: relative;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 309px;
    overflow: hidden;
}

#img_ul{
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 3000px;           /*多留出一张图片的宽度！*/
    list-style: none;
}
#img_ul li{
    float: left;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 309px;
}
#img_ul li img{
    width: 500px;
    height: 309px;
}

#litCir_ul{
    position: absolute;
    margin: 0;
    padding: 0;
    right: 10px;
    bottom: 10px;
    list-style: none;
}
#litCir_ul li{
    margin: 0;
    padding: 0;
    float: left;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%; 
    margin-left:10px ;
    cursor: pointer;
}

li.active{
    background-color: white;
}
li.quiet{
    background-color: #1e90ff;
}

#buttons{
    margin: 0;
    padding: 0;
    display: none;
}
#buttons span{
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: Simsun;
    font-size: 30px;
    border: 1px solid #fff;
    opacity: 0.3;
    cursor: pointer;
    color: #fff;
    background: black;
}
#left{
    left: 5px;
}
#right{
    left: 100%;
    margin-left: -45px;
}

需要注意的地方

• 图片的宽，高度应和img_ul中的li标签， 以及div#parent， div#uls的宽，高度一致。
• img_ul的宽度应为(图片数目+1）*每张图片的宽度。也就是要多留出一张图片的宽度（下一部分解释）。
• div uls部分使用overflow:hidden隐藏img_ul超出的部分，确保每次该区域只能显示一张完整的图片。

2.功能实现（JS部分）

①将会在下面用到的Html中的对象和一些变量

    /*获取HTML中的对象*/
    var parent = document.getElementById("parent");
    var img_ul = document.getElementById("img_ul");
    var litCir_ul = document.getElementById("litCir_ul");
    var buttons = document.getElementById("buttons");
    var cLis =litCir_ul.children;

    var len = img_ul.children.length;     //图片张数
    var width = parent.offsetWidth;       //每张图片的宽度
    var rate = 15;                        //一张图片的切换速度， 单位为px
    var times = 1;                        //切换速度的倍率
    var gap = 2000;                       //自动切换间隙， 单位为毫秒
    var timer = null;                     //初始化一个定时器
    var picN = 0;                         //当前显示的图片下标
    var cirN = 0;                         //当前显示图片的小圆点下标
    var temp;

②添加小圆点

之所用js添加小圆点，是因为小圆点的数量是由图片张数决定的。

    for (var i=0; i

默认li的class为quiet, 第一张默认为active。

③无缝滚动是怎么实现的？

首先先理解该轮播图如何滚动，这里是通过控制img_ul的left值来控制显示某张图片， 为了实现“滚动”的效果，我们需要逐渐改变img_ul的left值，而不能直接使该值变化图片宽度的倍数。这里我们定义一个动画效果函数Roll()。

function Roll(distance){                                         //参数distance：滚动的目标点（必为图片宽度的倍数）
clearInterval(img_ul.timer);                                     //每次运行该函数必须清除之前的定时器！
var speed = img_ul.offsetLeft < distance ?  rate : (0-rate);     //判断图片移动的方向

img_ul.timer = setInterval(function(){                           //设置定时器，每隔10毫秒，调用一次该匿名函数
    img_ul.style.left = img_ul.offsetLeft + speed + "px";        //每一次调用滚动到的地方 (速度为 speed px/10 ms)         
    var leave = distance - img_ul.offsetLeft;                    //距目标点剩余的px值      
    /*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/
    if (Math.abs(leave) <= Math.abs(speed)) {                    
        clearInterval(img_ul.timer);
        img_ul.style.left = distance + "px";
    }
},10);
}

试想下面的情况，当图片从最后一张切换到第一张时，这时就不能通过逐渐改变img_ul的left值来实现滚动的效果，于是克隆第一张图片至列表尾部，当滚动完最后一张图片时，继续滚动到克隆的第一张，然后将img_ul的left值置为0。

    /*克隆第一个li到列表末*/
    img_ul.appendChild(img_ul.children[0].cloneNode(true));

④自动滚动

function autoRun(){
    picN++;
    cirN++;
    if(picN > len){                  //滚动完克隆项后
        img_ul.style.left = 0;       //改变left至真正的第一项处
        picN = 1;                    //从第二张开始显示
    }
    Roll(-picN*width);
    
    if(cirN > len-1){                //判断是否到了最后一个圆点
        cirN = 0;                 
    }
    for(var i=0; i

需要注意的是小圆点和图片列表的li数目是不一样的，当滚动到最后一个克隆项时，此时小圆点实际上在第一个位置。

开始自动滚动：
timer = setInterval(autoRun, gap);

⑤触及小圆点时切换至对应图片

    for(var i=0; i

给每个小圆点绑定了onmouseover事件，这个方法有个细节，会根据两次小圆点的距离差调整速率为rate*times，使切换效果更自然（也就是说每次切换说花的时间基本一致，无论是第一张到第二张，还是第一张到最后一张）。

⑥触及轮播图区域和离开该区域时

    parent.onmouseover = function(){
        clearInterval(timer);
        buttons.style.display = 'block';
    }
    parent.onmouseout = function(){
        timer = setInterval(autoRun, gap);
        buttons.style.display = 'none';
    }

触及区域，清除定时器，显示按钮。
离开区域，添加定时器，隐藏按钮。

⑦给两个按钮添加onclick事件

    /*上一张*/
    buttons.children[0].onclick = function(){ 
        picN--;
        cirN--;
        if(picN < 0){                               //滚动完第一项后
            img_ul.style.left = -len*width + "px";  //改变left至克隆的第一项处
            picN = cirN = len-1;
        }
        Roll(-picN*width);
        //bug处理
        if(cirN < 0){
            cirN = len-1;
        }
        for(var i=0; i

自动播放就是间隔一定时间不断调用函数“下一张”的过程，所以这里的按钮right下一张的实现就是上面的autoRun函数。