首页 > 代码库 > 左右无缝滚动

左右无缝滚动

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>无标题文档</title><style>* {margin:0; padding:0;}#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}#div1 ul {position:absolute; left:0; top:0;}#div1 ul li {float:left; width:178px; height:108px; list-style:none;}</style><script>window.onload=function (){    var oDiv=document.getElementById(div1);    var oUl=oDiv.getElementsByTagName(ul)[0];    var aLi=oUl.getElementsByTagName(li);        var speed=-2;        //oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;    oUl.innerHTML+=oUl.innerHTML;    oUl.style.width=aLi[0].offsetWidth*aLi.length+px;//ul的宽度等于li的宽度乘以li个数        function move(){        if(oUl.offsetLeft<-oUl.offsetWidth/2)//判断图片是否滚动到一半        {            oUl.style.left=0;//滚动到一半的时候把它拉回来到初始的位置        }        if(oUl.offsetLeft>0)//当发现left大于0的时候        {            oUl.style.left=-oUl.offsetWidth/2+‘px‘; //迅速把它拉回来到一半的位置        }        oUl.style.left=oUl.offsetLeft+speed+px;    }    var timer=setInterval(move, 30);        oDiv.onmouseover=function ()    {        clearInterval(timer);//鼠标移入清除定时器    };        oDiv.onmouseout=function ()    {        timer=setInterval(move, 30);//鼠标移出设置定时器    };        document.getElementsByTagName(a)[0].onclick=function ()    {        speed=-2;//左边箭头    };    document.getElementsByTagName(a)[1].onclick=function ()    {        speed=2;//右边箭头    };};</script></head><body><a href="javascript:;">向左走</a><a href="javascript:;">向右走</a><div id="div1">    <ul>        <li><img src="img2/1.jpg" /></li>        <li><img src="img2/2.jpg" /></li>        <li><img src="img2/3.jpg" /></li>        <li><img src="img2/4.jpg" /></li>    </ul></div></body></html>

 

物体运动基础
让Div移动起来 offsetLeft的作用
用定时器让物体连续移动

效果原理
让ul一直向左移动
复制li innerHTML和+=
修改ul的width
滚动过界后,重设位置 判断过界

改变滚动方向
修改speed
修改判断条件 鼠标移入暂停 移入关闭定时器 移出重新开启定时器

 

左右无缝滚动