JavaScript仿淘宝首页轮播图

by Fakin

今天老九给大家分享淘宝首页的轮播效果图，无限无缝滚动轮播，实现方法简单，js代码中带有性能内存优化！
html代码：

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>焦点轮播图</title>
    <style type="text/css">
        *{ margin: 0; padding: 0; text-decoration: none;}
        body { padding: 20px;}
        #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
        #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
        #list img { float: left;}
        #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px;
            border-radius: 50%; background: #333; margin-right: 5px;}
        #buttons .on {  background: orangered;}
        .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px;
            font-weight: bold; width: 40px; height: 40px;  position: absolute;
            z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}
    </style>
<script src="js/banner.js" type="text/javascript"></script>
</head>
<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <!--过渡时使用，关键-->
        <!--过渡时使用，关键-->
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
</div>

</body>
</html>

js代码：

var container=document.getElementById("container");
    var list=document.getElementById("list");
    var buttons=document.getElementById("buttons").getElementsByTagName("span");
    var prev=document.getElementById("prev");
    var next=document.getElementById("next");
    var index=1;
    var animt=false;
    var timer;
//左右箭头
function animted(offset) {
    if (offset==0){
        return;
    }
    animt=true
    var left=parseInt(list.style.left)+offset;
    var time=300;//位移总时间
    var interval=10;//位移间隔
    var speed=offset/(time/interval);//每次位移量
    var go=function () {
        if ((speed > 0 && parseInt(list.style.left) < left)
            ||(speed < 0 && parseInt(list.style.left) > left)){
            list.style.left=parseInt(list.style.left)+speed+"px"
            setTimeout(go,interval)
        }else {
            list.style.left=left+'px';
            if (left<-3000){
                list.style.left=-600+'px';
            }
            if (left>-600){
                list.style.left=-3000+'px';
            }
            animt=false;
        }
    }
    go()



}
prev.onclick=function () {
    if (animt){
        return
    };
    animted(600)
    if (index==1){
        index=5
    }else {
    index-=1}
    showButton();

}
next.onclick=function () {
    if (animt){
        return
    };
    animted(-600)
    if (index==5){
        index=1
    }else {
    index+=1}
    showButton();
}
//小圆点高亮
function showButton() {
    for(var i=0;i<buttons.length;i++){
        if (buttons[i].className=="on"){
            buttons[i].className="";
            break;
        };
    };
        buttons[index - 1].className = "on"
}
//小圆点切换
for(var i=0;i<buttons.length;i++){
    buttons[i].onmouseover=function () {
        if (animt){
            return
        };
        if(this.className == 'on') {
            return;
        }
        var myIndex=parseInt(this.getAttribute("index"));
        var offset=-600*(myIndex-index)//偏移量
        animted(offset);
        index=myIndex;
        showButton();

    }

}
//自动滚动
function play() {
    timer=setInterval(function () {
        next.onclick();
    },3000)
}
function stop() {
    clearInterval(timer)
}
container.onmouseover=stop;
container.onmouseout=play;
play()

注意：此方法，没有用到常用的滚动中，当滚动到最后一张的时候克隆所有图片的html，而是采用类似于淘宝团队提出的使用图片过渡的方式呈现！