javascript 实现轮播图

//html
<div class="container">
    <div id="lists" style="left:-600px">
        ![](images/05.png)
        ![](images/01.png)
        ![](images/02.png)
        ![](images/03.png)
        ![](images/04.png)
        ![](images/05.png)
        ![](images/01.png)
    </div>
    <div id="btns">
        <span class="current"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <span id="prev"></span>
    <span id="next"></span>
</div>
<script>
    var lists = document.getElementById("lists");
    var btns = document.getElementById("btns").getElementsByTagName("span");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var index = 0;
    function animate(offset){
        var newLeft=parseInt(lists.style.left)+offset;
        /*走到下一张图片-600px*/
        lists.style.left=newLeft+"px";
        if(newLeft<-3000){
            lists.style.left=-600+"px"
        }
        if(newLeft>-600){
            lists.style.left=-3000+"px"
        }
    }
    /*显示按钮*/
    function showBtn(){
        for(var i =0;i<btns.length;i++){
            btns[i].className="";
        }
        btns[index].className="current"
    }
    /*下一个*/
    next.onclick = function(){
        animate(-600);
        if(index==4){
            index=0
        }else{
            index++;
        }
        showBtn();
    };
    /*上一个*/
    prev.onclick = function(){
        animate(600);
        if(index==0){
            index = 4
        }else{
            index--;
        }
        showBtn();
    }
</script>

//css
<style>
        .container{
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
            width:600px;
            height:400px;
            border:1px solid #333;
            overflow: hidden;
            position: relative;
        }
        #lists{
            width:4200px;
            height:400px;
            position: absolute;
        }
        #lists>img{
            float:left;
        }
        #btns{
            text-align: center;
            width:100px;
            height:10px;
            position: absolute;
            z-index: 100;
            bottom:10px;
            left: 50%;
            margin-left:-50px;
        }
        #btns>span{
            cursor: pointer;
            width:10px;
            height:10px;
            display:inline-block;
            border:1px solid #fff;
            background:#666;
            border-radius: 50%;
        }
            #prev,#next{
                cursor: pointer;
                width:41px;
                height:69px;
                display: inline-block;
                position: absolute;
                z-index: 100;
                background:url(images/icon-slides.png) no-repeat;
                top:50%;
                margin-top: -35px;
            }
            #prev{
                left:0;
            }
            #next{
                right:0;
                background-position: -42px 0;
            }
            #btns>.current{
                background:darkred;
            }
    </style>