本文主要跟大家分享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無縫滾動的實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
