时间:2021-07-01 10:21:17 帮助过:3人阅读
本文主要和大家分享js无缝滚动的实例,希望能帮助到大家。效果原理:让ul一直向左滚动 复制li,改变ul的宽度, 进行判断,是否越界 如果越界,重新定位。 控制向左向右,设定一个speed,更改其值的正负。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>无缝轮播</title> <style> *{margin: 0;padding: 0;} #p1{width: 800px;height: 150px;margin: 100px auto;position: relative;background: blue;overflow: hidden;} #p1 ul{position: absolute;top: 0;left: 0;} #p1 ul li{list-style-type: none;float: left;width: 200px;height: 150px;;} img{width: 200px;height: 150px;} </style> <script> window.onload=function(){ //控制向左向右,主要是通过是加还是减speed var speed=-2; function move(){ if(oUl.offsetLeft<-oUl.offsetWidth/2){ //当其往左移动了四个li的宽度时,把整个图片拉回来 oUl.style.left=0; } if(oUl.offsetLeft>0){ //记得末尾加px oUl.style.left=-oUl.offsetWidth/2+'px'; } oUl.style.left=oUl.offsetLeft+speed+'px'; }; var time=null; var op = document.getElementById('p1'); var oUl = op.getElementsByTagName('ul')[0]; var oLi = op.getElementsByTagName('li'); //使其形成8个li oUl.innerHTML = oUl.innerHTML+oUl.innerHTML; oUl.style.width = oLi[0].offsetWidth*oLi.length+'px'; time = setInterval(move,30); op.onmouseover= function(){ clearInterval(time); } op.onmouseout= function(){ time = setInterval(move,30); } var oBtn = document.getElementsByTagName('button'); oBtn[0].onclick = function(){ speed = -2; } oBtn[1].onclick = function(){ speed = 2; } } </script> </head> <body> <button value="向左走">向左走</button> <button value="向右走">向右走</button> <p id="p1"> <ul> <li><img src="img/1.jpg"></li> <li><img src="img/3.jpg"></li> <li><img src="img/4.jpg"></li> <li><img src="img/2.jpg"></li> </ul> </p> </body></html>
相关推荐:
JS无缝滚动
彻底搞懂JS无缝滚动代码_javascript技巧
js怎么实现文字列表无缝滚动?
以上就是js无缝滚动的实例分享的详细内容,更多请关注Gxl网其它相关文章!