js无缝滚动的实例分享
程序员文章站
2022-04-19 16:02:06
...
本文主要和大家分享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无缝滚动的实例分享的详细内容，更多请关注其它相关文章！
上一篇： jquery添加带有样式的HTML标签
下一篇： 详解jQuery 事件的命名空间