<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);    }}