js实现无缝轮播

来源：互联网发布：php memcache set参数编辑：程序博客网时间：2024/05/18 23:53

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

“`

阅读全文

0 0