WEB机试题--无缝轮播

*{
    margin: 0;
    padding: 0;
}
#box{
    width: 500px;
    height: 200px;
    padding: 5px;
    margin: 50px auto;
    border: 1px solid #999999;
}
.inner{
    width: 500px;
    height: 200px;
    overflow: hidden;
    position: relative;
}
ul,ol{
    list-style: none;
    position: absolute;
}
ul{
    width: 3000px;
    height: 200px;
}
li{
    float: left;
}
ol{
    right: 20px;
    bottom: 20px;
}
ol>li{
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer;
}
ol>li.current{
    background-color: orange;
    color: white;
}
.control{
    display: none;
}
.control>span{
    position: absolute;
    top: 50%;
    margin-top: -20px;
    display: inline-block;
    width: 25px;
    height: 40px;
    line-height: 40px;
    background-color: rgba(0,0,0,0.3);
    color: white;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
}
.right{
    right: 0;
}

<div id="box">
    <div class="inner">
        <ul>
            <li><img src="image/1.jpg" alt=""></li>
            <li><img src="image/2.jpg" alt=""></li>
            <li><img src="image/3.jpg" alt=""></li>
            <li><img src="image/4.jpg" alt=""></li>
            <li><img src="image/5.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <div class="control">
            <span class="left"><</span>
            <span class="right">></span>
        </div>
    </div>
</div>

var box=document.getElementById("box");
var ul=box.getElementsByTagName("ul")[0];
var ol=box.getElementsByTagName("ol")[0];
var olLiArr=ol.children;
var control=box.getElementsByClassName("control")[0];

ul.appendChild(ul.children[0].cloneNode(true));
var index=0;
var circleIndex=0;

var timer=setInterval(autoPlay,2000);
//鼠标移入移出
box.onmouseover=function () {
    clearInterval(timer);
    control.style.display="block";
};
box.onmouseout=function () {
    timer=setInterval(autoPlay,2000);
    control.style.display="none";
};
//小圆点
for (var i=0;i<olLiArr.length;i++) {
    olLiArr[i].index=i;
    olLiArr[i].onclick=function () {
        if(index===5){
            ul.style.left=0;
            index=0;
        }
        for (var i=0;i<olLiArr.length;i++){
            olLiArr[i].removeAttribute("class");
        }
        this.setAttribute("class","current");
        animate_constSpeed_x(ul,-this.index*500);
        index=this.index;
        circleIndex=this.index;
    }
}
//左右点击
control.children[1].onclick=function () {
    autoPlay();
};
control.children[0].onclick=function () {
    index--;
    if (index<0){
        ul.style.left=-2500+"px";
        index=4;
    }
    animate_constSpeed_x(ul,-index*500);
    circleIndex--;
    if (circleIndex<0){
        circleIndex=4;
    }
    for (var i=0;i<olLiArr.length;i++) {
        olLiArr[i].removeAttribute("class");
    }
    olLiArr[circleIndex].setAttribute("class","current");
};

//自动轮播封装
function autoPlay() {
    index++;
    if (index>5){
        ul.style.left=0;
        index=1;
    }
    animate_constSpeed_x(ul,-index*500);
    circleIndex++;
    if (circleIndex>4){
        circleIndex=0;
    }
    for (var i=0;i<olLiArr.length;i++) {
        olLiArr[i].removeAttribute("class");
    }
    olLiArr[circleIndex].setAttribute("class","current");
}
//匀速封装
function animate_constSpeed_x(ele,endX) {
    clearInterval(ele.timer);
    var step=(endX-ele.offsetLeft)>0?10:-10;
    ele.timer=setInterval(function () {
        ele.style.left=ele.offsetLeft+step+"px";
        console.log(1);
        if(Math.abs(endX-ele.offsetLeft)<=Math.abs(step)){
            clearInterval(ele.timer);
            ele.style.left=endX+"px";
        }
    },10)
}