无缝滚动效果-CSDN博客

本文链接：https://blog.csdn.net/wangjiangnan17214/article/details/77683602

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动效果</title>
<style type="text/css">
*{margin:0px;padding:0px;}
.clear{clear:both;}
#div1{width:880px;height:140px;margin:100px auto;position:relative;overflow: hidden;}
#div1 ul{position:absolute;top:0;left:0px;border:1px solid black;}
#div1 ul li{float:left;list-style: none;width:220px;height:140px;padding:0 2px;}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv1 = document.getElementById("div1");
var oUl = oDiv1.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
var speed=2;
oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth*aLi.length+'px';
function move(){ //判断向左滚动
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left = '0';
};
if(oUl.offsetLeft>0){ //判断向右滚动
oUl.style.left = -oUl.offsetWidth/2+'px';
};
// oUl.style.left = oUl.offsetLeft+2+'px'; //向右滚动
// oUl.style.left = oUl.offsetLeft-2+'px'; //向左滚动
oUl.style.left = oUl.offsetLeft+speed+'px';
}
var timer = setInterval(move,30);
oDiv1.onmouseover = function(){
clearInterval(timer);

};
oDiv1.onmouseout = function(){
timer = setInterval(move,30);

};
document.getElementsByTagName('a')[0].onclick = function(){
speed = -2;
}
document.getElementsByTagName('a')[1].onclick = function(){
speed = 2;
}
}
</script>
</head>
<body>
<a href="javascript:;">向左移动</a>
<a href="javascript:;">向右移动</a>
<div id="div1">
<ul>
<li><img src="img/1.png" alt="" style="width:220px;height:140px;"></li>
<li><img src="img/2.png" alt="" style="width:220px;height:140px;"></li>
<li><img src="img/3.png" alt="" style="width:220px;height:140px;"></li>
<li><img src="img/4.png" alt="" style="width:220px;height:140px;"></li>
</ul>
</div>

</body>
</html>