本文主要和大家分享js无缝滚动的实例，希望能帮助到大家。效果原理:让ul一直向左滚动 复制li，改变ul的宽度， 进行判断，是否越界 如果越界，重新定位。 控制向左向右，设定一个speed，更改其值的正负。
nbsp;html>无缝轮播 *{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;} window.onload=function(){ //控制向左向右，主要是通过是加还是减speed var speed=-2; function move(){ if(oUl.offsetLeft0){ //记得末尾加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; } }
登录后复制
相关推荐：
JS无缝滚动
彻底搞懂JS无缝滚动代码_javascript技巧
js怎么实现文字列表无缝滚动？
以上就是js无缝滚动的实例分享的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2782823.html
