图片轮播效果

主要还是setTimeout定时器的使用和事件的绑定

html代码

    <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>

之所以插入了7张图片是为了当图片播放到第一张和最后一张的时候让滑动在视觉效果上更加平滑

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

js代码

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

 

来源：https://www.cnblogs.com/ckzhou/p/4078490.html