左右无缝滚动
Posted Cutelady0927
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了左右无缝滚动相关的知识，希望对你有一定的参考价值。
<!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
修改判断条件 鼠标移入暂停 移入关闭定时器 移出重新开启定时器
以上是关于左右无缝滚动的主要内容，如果未能解决你的问题，请参考以下文章