原生无缝滚动效果

最新推荐文章于 2025-09-10 14:53:18 发布

weixin_30550271

最新推荐文章于 2025-09-10 14:53:18 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zzgyq/p/6529414.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{position: relative;width: 1060px; height: 220px;margin: 100px auto;border: 2px solid #ccc;overflow: hidden;}
#list{width:2120px; height:220px;
position: absolute;top: 0; left: 0;}
#list li{float: left; margin-left: 10px;padding: 10px 0; list-style: none;}
input{ width: 40px; height: 30px; color: red; position: absolute;top: 65%;}
#left{left: 110px;}
#right{right: 110px;}
</style>
</head>
<body>
<div id="box">
<ul id="list">
<li><img src="img/album1.jpg" width="200" height="200"/></li>
<li><img src="img/album2.jpg" width="200" height="200"/></li>
<li><img src="img/album3.jpg" width="200" height="200"/></li>
<li><img src="img/album4.jpg" width="200" height="200"/></li>
<li><img src="img/album5.jpg" width="200" height="200"/></li>
<li><img src="img/album1.jpg" width="200" height="200"/></li>
<li><img src="img/album2.jpg" width="200" height="200"/></li>
<li><img src="img/album3.jpg" width="200" height="200"/></li>
<li><img src="img/album4.jpg" width="200" height="200"/></li>
<li><img src="img/album5.jpg" width="200" height="200"/></li>
</ul>
</div>
<input type="button" name="left" id="left" value="左移" />
<input type="button" name="right" id="right" value="右移" />
<script type="text/javascript">
var olist = document.getElementById("list");
var obox = document.getElementById("box");
var oLeft = document.getElementById("left");
var oRight = document.getElementById("right");
var timer = null;
var timer1 =null;
move1();
olist.onmouseover = function(){
clearInterval( timer );
clearInterval( timer1 );
}
oLeft.onclick = function(){
clearInterval( timer );
clearInterval( timer1 );
move();
}
function move(){
var ul = olist.offsetLeft;
timer = setInterval(function(){
ul -= 5;
if(ul <= -olist.offsetWidth / 2){
ul = 0;
}
olist.style.left = ul + 'px';
},14)
}

oRight.onclick = function(){
clearInterval( timer );
clearInterval( timer1 );
move1();
}
function move1(){
var ul = olist.offsetLeft;
timer1 = setInterval(function(){
ul += 5;
if(ul >= 0){
ul = -olist.offsetWidth/2;
}
olist.style.left = ul + 'px';

},14)
}
</script>
</body>
</html>