轮播图无限滚动

在慕课网看视频学到的轮播衅无限滚动,记录下

HTML

<div id="content">
    <div class="wrap">
        <div class="slider" id="container">
            <div class="showPic">
                <ul id="moveUl" style="left:-660px;">
                    <li><p>1</p><img src="images/1.jpg" alt="" /></li>
                    <li><p>2</p><img src="images/2.jpg" alt="" /></li>
                    <li><p>3</p><img src="images/3.jpg" alt="" /></li>
                    <li><p>4</p><img src="images/4.jpg" alt="" /></li>
                    <li><p>5</p><img src="images/5.jpg" alt="" /></li>
                    <li><p>6</p><img src="images/6.jpg" alt="" /></li>
                </ul>
            </div>
            <div class="showNum" id="indexNum">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <a href="javascript:;" class="prev" id="prev_btn"></a>
            <a href="javascript:;" class="next" id="next_btn"></a>
        </div>
    </div>
</div>

CSS

/******公共样式******/
body{font:12px/28px "微软雅黑";overflow-x:hidden;}
.wrap{width:1000px;margin:0 auto; position:relative;}
/******背景******/
#content{min-width:1000px;height:500px;margin:0 auto;}
#content .wrap{width:1000px;margin:0 auto;height:500px;position:relative;}
#content .slider{width:660px;height:470px;position:relative;overflow:hidden;}
#content .slider .prev{position:absolute;left:0px;top:40%;width:50px;height:100px;background-color:yellow;border:1px solid blue;}
#content .slider .next{position:absolute;right:0px;top:40%;width:50px;height:100px;background-color:yellow;border:1px solid blue;}
#content .slider .showPic{width:660px;height:470px;position:relative;}
#content .slider .showPic ul{position:absolute;left:-660px;top:0;width:90000px;}
#content .slider .showPic li{cursor:pointer;width:660px;height:470px;float:left;position:relative;}
#content .slider .showPic li img{width:660px;height:470px;}
#content .slider .showPic li p{position:absolute;left:40%;top:0;text-align:center;line-height:470px;color:red;font-size:150px;font-weight:bold;}
#content .slider .showNum{width:100%;position:absolute;left:0;bottom:30px;overflow:hidden;z-index:10;text-align:center;}
#content .slider .showNum ul{display:inline-block;*zoom:1;*display:inline;}
#content .slider .showNum li{cursor:pointer;float:left;margin:0 5px;width:15px;height:15px;background:#fff;border:1px solid #000;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
#content .slider .showNum li.active{background-color:red;}
#content .slider .showNum li.active p{color:blue;}
#content .slider .showNum li img{width:100px;height:100px;}
#content .slider .showNum li p{text-align:center;line-height:100px;color:#fff;font-size:50px;font-weight:bold;}

Javascript

    var container = document.getElementById("container");
    var moveUl = document.getElementById("moveUl");
    var liImg = moveUl.getElementsByTagName("li");
    var liLength = liImg.length-1;
    var liWidth = liImg[0].offsetWidth;
    var fisrtLi = liImg[0].cloneNode(true);
    var lastLi = liImg[liLength].cloneNode(true);
    var prev = document.getElementById("prev_btn");
    var next = document.getElementById("next_btn");
    var smallBox = document.getElementById("indexNum");
    var smallButton = smallBox.getElementsByTagName("li");
    var smallLength = smallButton.length;
    var iThis = 0;
    var animated = false;
    var interval = 3000;
    var timer = null;
    moveUl.appendChild(fisrtLi);
    moveUl.insertBefore(lastLi, liImg[0])

    // 左按钮
    prev.onclick = function(){
        // 判断是否执行一个运动
        if (animated) {
            return;
        }

        // 索引
        if(iThis > 0){
            iThis--;
        }else{
            iThis = liLength
        }
        animate(liWidth);
        showButton();
    }

    next.onclick = function(){
        // 判断是否执行一个运动
        if (animated) {
            return;
        }
        // 索引
        if(iThis < liLength){
            iThis++;
        }else{
            iThis = 0;
        }
        animate(-liWidth);
        showButton();
    }

    // 运动逻辑
    function animate(offset){
        animated = true;
        var frame = 1000/60;
        var time = 1000;                        // 运动时间
        // 运动速度 = (运动距离/运动时间) * (定时器每次调用的间隔时间)
        speed = (offset / time) * frame;
        console.log((offset / time));
        // speed = parseInt(((offset / time) * parseInt(frame, 10)), 10);        // 运动速度
        var left = parseInt(moveUl.style.left) + offset;
        var seTime = null;
        go();
        function go(){
            if((speed > 0 && parseInt(moveUl.style.left) < left) || (speed < 0 && parseInt(moveUl.style.left) > left) ){
                moveUl.style.left = parseInt(moveUl.style.left) + speed + "px";
                setTimeout(go, frame);
            }else{
                moveUl.style.left = left + "px";
                if(left > -liWidth){
                    moveUl.style.left = -liWidth * (liLength + 1) + "px";
                }
                if(left < -liWidth * (liLength + 1)){
                    moveUl.style.left = -liWidth + "px";
                }
                animated = false;
            }
        }
        
    }

    showButton();
    function showButton(){
        for(var j = 0; j < smallLength; j++){
            smallButton[j].className = "";
        }
        smallButton[iThis].className = "active";
    }


    // for循环的闭包(加一层闭包，i以函数参数形式传递给内层函数)
    for(var i = 0; i < smallLength; i++){
        (function(arg){
            smallButton[i].onclick = function(){
                if (animated) {
                    return;
                }
                if(this.className == "active"){
                    return;
                }
                var offset = -liWidth * (arg - iThis);
                animate(offset);
                iThis = arg;
                showButton();
                console.log(arg);
            }
        })(i);        　// 调用时参数
    }

    // for循环的闭包(将变量 i 保存给在每个段落对象 li 上)
    // for(var i = 0; i < smallLength; i++){
    //     smallButton[i].index = i;
    //     smallButton[i].onclick = function(){
    //         if (animated) {
    //             return;
    //         }
    //         if(this.className == "active"){
    //             return;
    //         }
    //         var offset = -liWidth * (this.index - iThis);
    //         animate(offset);
    //         iThis = this.index;
    //         showButton();
    //     }
    // }