无缝轮播图实现-优快云博客

html代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>无缝轮播</title>
        <link rel="stylesheet" href="wufenglunbo.css" />
    </head>
    <body>
        <div id="container">
            <div id="list" style="left:-600px;">
                <img src="img/5.jpg" title="5" />
                <img src="img/1.jpg" title="1" />
                <img src="img/2.jpg" title="2" />
                <img src="img/3.jpg" title="3" />
                <img src="img/4.jpg" title="4" />
                <img src="img/5.jpg" title="5" />
                <img src="img/1.jpg" title="1" />
            </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>
    </body>
</html>
<script type="text/javascript" src="wufenglunbo.js" ></script>



css代码样式如下：

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


js代码样式如下：
------


window.onload=function(){
    //获取所需要的元素
    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;//用来存放小圆点的索引值 数组下表是从0开始的想要表示第一个元素时 待减1；
    var animated=false//定义一个变量 初始化为false 用来表示没有动画效果在运行
    var dingshiqi=null;//定义定时器变量
    //封装一个自动播放的函数 默认是右边的播放
    function play(){
        dingshiqi=setInterval(function(){
            next.onclick();
        },3000)
    }
    //定义清除定时器的函数
    function stop(){
        clearInterval(dingshiqi);
    }
    //封装设置小圆点的样式的函数
    function showButton(){
        //清除一下被选中状态的原点
        for(var i=0;i<buttons.length;i++){
            if(buttons[i].className=='on'){
                buttons[i].className='';
                break;
            }
        }
        buttons[index-1].className='on';
    }
    //——————对左右按钮进行单击事件的绑定————
    //封装函数
    function animate(offset){
        //执行动画的时候讲其值改为true
        animated=true;
        var newLeft=parseInt(list.style.left)+offset;
        var time=300;//设置总时间
        var interval=10;//设置间隔时间
        var speed=offset/(time/interval);//每次的偏移量
        function go(){
            if((speed<0&&parseInt(list.style.left)>newLeft)||(speed>0&&parseInt(list.style.left)<newLeft)){
                list.style.left=parseInt(list.style.left)+speed+'px';
                setTimeout(go,interval);//循环执行
            }else{
                animated=false;
                list.style.left=newLeft+'px';       
                //设置循环的限制条件 
                if(newLeft>-600){
                    list.style.left=-3000+'px';
                }
                if(newLeft<-3000){
                    list.style.left=-600+'px';
                }

            }
        }

        go();


    }
    //点击左边箭头时图片左移600像素
    next.onclick=function(){
        //判断动画是否执行完毕
        if(animated){
            return;
        }
        if(index==5){
            index=1;
        }else{
            index++;
        }
        showButton();
        animate(-600);
    }
    //点击右边箭头时图片右移600px
    prev.onclick=function(){
        if(animated){
            return;
        }
        if(index==1){
            index=5;
        }else{
            index--;
        }
        showButton();
        animate(600);
    }

    //循环buttons 并对其进行时间绑定
    for(var i=0;i<buttons.length;i++){
        buttons[i].onclick=function(){
            //index是自定义属性 不能直接用this
            if(this.className=='on'){
                return;
            }
            if(animated==false){
            var myIndex=parseInt(this.getAttribute('index'));
            var offset=-600*(myIndex-index);
            animate(offset);
            index=myIndex;//将当前的值改为现在存储的值
            showButton();//点击后实现原点样式的切换
            }
        }
    }

    //设置鼠标滑过清除定时器
    container.onmouseover=stop;
    //设置鼠标离开时添加定时器
    container.onmouseout=play;
    play();
}