首页 > 代码库 > JS无缝滚动
JS无缝滚动
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> *{margin:0;padding:0;} #div1 {width:712px;height:108px;margin:100px auto;} #div1 ul {position:absolute;left:0;top:0;} #div1 ul li{width:200px;height:200px;background: red;position: absolute;left:200px;top:150px;}</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;//4+4==8 oUl.style.width=aLi[0].offsetWidth*aLi.length+‘px‘; function move(){ //定时器函数 if(oUl.offsetLeft<-oUl.offsetWidth/2){//offsetLeft偏移量，往左是负数,offsetWidth宽度，是正数。左移 oUl.style.left=‘0‘;//坐标重置为0 } if(oul.style.left>0){//右移,负数变0表示右移过了4个li了 oUl.offsetLeft=-oUl.offsetWidth/2+‘px‘;//左偏移量 变成 -宽度一半，表示8个li居中.0不加px,有数字的要加px } oUl.style.left=oDiv.offsetLeft+speed+‘px‘;//给当前对象左边距+2px右移 并返回 } var timer=setInterval(move,30);//参数里面运行有名函数move不用带(),这是js区别于java的不同点 //添加鼠标移入事件 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><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>
JS无缝滚动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。