图片轮播效果

    <div id="container">
        <!--图片列表-->
        <div id="list" style="left:-600px;">
            <img src="imgs/5.jpg"/>
            <img src="imgs/1.jpg"/>
            <img src="imgs/2.jpg"/>
            <img src="imgs/3.jpg"/>
            <img src="imgs/4.jpg"/>
            <img src="imgs/5.jpg"/>
            <img src="imgs/1.jpg"/>
        </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">&lt;</a>
        <a href="javascript: ;" id="next" class="arrow">&gt;</a>
    </div>

    *{
        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;
        left:250px;
        bottom:20px;
        z-index:2;
        width:100px;
        height:10px;
    }
    #buttons span{
        float:left;
        width:10px;
        height:10px;
        cursor:pointer;
        border:1px solid #FFF;
        border-radius:50%;
        background-color:#333;
        margin-right:5px;
    }
    #buttons .on{
        background-color:orangered;
    }
    #prev,#next{
        position:absolute;
        top:180px;
        display:none;
        z-index:2;
        cursor:pointer;
        width:40px;
        height:40px;
        line-height:39px;
        font-size:36px;
        font-weight:bold;
        text-align:center;
        color:#FFF;
        background-color:RGBA(0,0,0,.3);
    }
    #prev{
        left:20px;
    }
    #next{
        right:20px;
    }
    #prev:hover,#next:hover{
        background-color:RGBA(0,0,0,.7);
    }
    #container:hover .arrow{
        display:block;
    }

function $(id){
    return document.getElementById(id);    
}
window.onload=function(){
    //提取相关元素
    var container=$("container");
    var list=$("list");
    var buttons=$("buttons").getElementsByTagName(‘span‘);
    var prev=$("prev");
    var next=$(‘next‘);
    var interval=3000;
    var index=1;
    var len=5;
    var timer=null;
    var animated=false;
    //图片滑动函数
    function animate(offset){
        if(animated){   //如果正在进行图片滑动，则退出函数
            return ;    
        }
        animated=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(parseInt(list.style.left)>-600){
                    list.style.left="-3000px";    
                }
                if(parseInt(list.style.left)<-3000){
                    list.style.left="-600px";    
                }
                animated=false;
            }
        }
        go();
    }
    //高亮显示当前图片对应的圆形按钮
    function showButton(){
        for(var i=0;i<len;i++){
            if(buttons[i].className=="on"){
                buttons[i].className="";
                break;
            }
        }
        buttons[index-1].className="on";
    }
    //为“上一个”按钮绑定点击事件
    prev.onclick=function(){
        if(animated){
            return ;    
        }
        animate(600);
        if(index==1){
            index=5;    
        }
        else{
            index-=1;    
        }
        showButton();
    }
    //为“下一个”按钮绑定点击事件
    next.onclick=function(){
        if(animated){
            return ;
        }
        animate(-600);
        if(index==5){
            index=1;    
        }
        else{
            index+=1;    
        }
        showButton();
    }
    //为圆形按钮绑定点击事件
    for(var i=0;i<len;i++){
        buttons[i].onclick=function(){
            if(this.className=="on"){
                return ;
            }
            if(animated){
                return ;
            }
            var myIndex=parseInt(this.getAttribute(‘index‘));
            var offset=(myIndex-index)*(-600);
            animate(offset);
            index=myIndex;
            showButton();
        }
    }
    function play(){
        next.onclick();
        timer=setTimeout(play,interval)
    }
    function stopGo(){
        clearTimeout(timer);    
    }
    timer=setTimeout(play,interval);
    //鼠标移上图片停止下一次的图片滑动
    container.onmouseover=stopGo;
    //鼠标移开图片继续下一次的图片滑动
    container.onmouseout=function(){
        timer=setTimeout(play,interval);
    }
}