简单轮播图2（左右）-蒲公英云

HTML部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图3</title>
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" href="../css/轮播图3.css" />
        <script type="text/javascript" src="../js/basics.js"></script>
        <script type="text/javascript" src="../js/轮播图3.js"></script>
    </head>
    <body>
        <div id="box">
            <ul class="clear" id="list">
                <li>
                    <img src="../img/1504579720226.jpg" />
                </li>
                <li>
                    <img src="../img/1504579756992.jpg" />
                </li>
                <li>
                    <img src="../img/1504579814977.jpg" />
                </li>
                <li>
                    <img src="../img/1504579832741.jpg" />
                </li>
                <li>
                    <img src="../img/1504579877857.jpg" />
                </li>
            </ul>
            <div id="toPrev"><</div>
            <div id="toNext">></div>
            <div id="sortNum">
                <ul>
                    <li class="active">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS部分

#box{ width: 600px; height: 400px; margin: 100px auto; border: solid 1px #2AABD2; position: relative; overflow: hidden; }
#box ul{ height: 500px; position: absolute; top: 0; left: 0; }
#box #list li{ float: left; }
#box #list li img{ height: 400px; width: 600px; display: block; }
#toPrev{ height: 100px; width: 50px; background: black; opacity: 0.3; filter: alpha(opacity = 30); position: absolute; left: 0; top: 50%; margin-top: -50px; color: #FFF; font-size: 40px; text-align: center; line-height: 100px; cursor: pointer; }
#toNext{ height: 100px; width: 50px; background: black; opacity: 0.3; filter: alpha(opacity = 30); position: absolute; right: 0; top: 50%; margin-top: -50px; color: #FFF; font-size: 40px; text-align: center; line-height: 100px; cursor: pointer; }
#sortNum{ position: absolute; right: -43px; bottom: 20px; width: 200px; height: 20px; }
#sortNum ul li{ float: left; height: 20px; width: 20px; background: black; opacity: 0.3; filter: alpha(opacity = 30); color: #FFFFFF; text-align: center; line-height: 20px; margin-right: 5px; cursor: default; }
#sortNum ul .active{ background: yellow; opacity: 1; filter: alpha(opacity = 100); color: black; }

js部分

window.onload = function(){ 
    var box = $('box');
    var toPrevBtn = $('toPrev');
    var toNextBtn = $('toNext');
    var oUl = $('list');
    oUl.appendChild(oUl.children[0].cloneNode(true));
    var lis = oUl.getElementsByTagName('li');
    var liWidth = lis[0].offsetWidth;
    oUl.style.width = lis.length*liWidth + 'px';
    var sortNumDiv = $('sortNum');
    var nLis = sortNumDiv.getElementsByTagName('li');
    var i = 0;
    var timer = setInterval(function(){ 
        i++;
        move();
    },1000);
    function move(){ 
        if(i < 0){   //如果图片移动到第一张之前
            oUl.style.left = -liWidth*(lis.length-1)+'px';
            i = lis.length-2;
        }
        if(i == lis.length){  //如果图片移动到最后一张之后
            oUl.style.left = 0 + 'px';
            i = 1;
        }
        animate(oUl,'left',liWidth*-i);
        if(i == nLis.length){ 
            nLis[0].className = 'active';
            for(var j = 1;j < nLis.length;j++){
                nLis[j].className = '';
            }
        }else{
            for(var j = 0;j < nLis.length;j++){
                if(j != i){
                    nLis[j].className = '';
                }else{
                    nLis[j].className = 'active';
                }
            }
        }
    }
    toPrevBtn.onclick = function(){ 
        i--;
        move();
    };
    toNextBtn.onclick = function(){ 
        i++;
        move();
    };
    //鼠标放在数字键上
    for(var k = 0;k < nLis.length;k++){
        nLis[k].index = k;
        nLis[k].onmouseover = function(){ 
            i = this.index;
            move();
        };
    }
// //鼠标放在数字键上二（不能让这样用因为排序和包含块的时间会子鼠标移除排序框时，多次触发，导致混乱）
// for(var k = 0;k < nLis.length;k++){ 
// nLis[k].index = k;
// nLis[k].onmouseover = function(){ 
// i = this.index;
// move();
// clearInterval(timer);
// };
// 
// nLis[k].onmouseout = function(){ 
// 
// timer = setInterval(function(){ 
// i++;
// move();
// },1000);
// };
// }
// 
    //鼠标放在盒子上停止运动，离开继续运动
    box.onmousemove = function(){ 
        clearInterval(timer);
    };
    box.onmouseout = function(){ 
        timer = setInterval(function(){ 
        i++;
        move();
        },1000);
    };
// 
};

效果
图片会轮播，点击序号框会滑到指定图片，点击向左向右可翻页

注意点：
1、克隆第一子节点，ul设置为相对定位，ul的宽度为所有li宽度之和
2、当图片被点击到第一张图片之前的位置，采用了非动画的方式直接将ul的left的值设置为-（图片的张数-1）*图片宽度，符号表示向右移动（既移动到最后一张图片的位置），然后将i的值设置为i-2既从倒数第二张图片

3、如果移动到最后一张图片之后则将ul的left值设为0，将i设置为1，既从第二张图片开始轮播
4、排序框的改变这里是通过设置元素的class名实现的
5、因为这里的向左和向右的div是设置在box上的，而在box上设置了鼠标移入就停止定时器，所以点击向左和向右时不需要再让定时器停止。如他们设置在box的外部，则需要设置停止定时器，并在离开时在开启
6、向左既将i的值减小，向右既将i的值增大，然后再继续执行