js_无缝滚动效果offsetLeft

来源：互联网发布：创业者必备的网络知识编辑：程序博客网时间：2024/05/29 14:45

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;padding:0;
}
ul{
width:1104px;
height: 75px;

margin:10px auto;
position: absolute;
left:0px;
}
img{
width: 138px;
height: 75px;
}
li{
float: left;
list-style-type: none;
}
#outer{
width:552px;
height: 75px;
position: relative;
margin:0 auto;
overflow: hidden;
}
</style>
</head>
<body>
<div id = 'outer'>
<ul>
<li><img src="img/1-1.jpg" alt=""></li>
<li><img src="img/2-2.jpg" alt=""></li>
<li><img src="img/3-3.jpg" alt=""></li>
<li><img src="img/4-4.jpg" alt=""></li>
<li><img src="img/1-1.jpg" alt=""></li>
<li><img src="img/2-2.jpg" alt=""></li>
<li><img src="img/3-3.jpg" alt=""></li>
<li><img src="img/4-4.jpg" alt=""></li>
</ul>
</div>
<a href="###">向左</a>
<a href="###">向右</a>
<script>
var oul = document.getElementsByTagName('ul')[0];
var left = document.getElementsByTagName('a')[0];
var right = document.getElementsByTagName('a')[1];
var time = null;
var speed = -2;
function move(){
oul.style.left = oul.offsetLeft + speed +'px';
if(oul.offsetLeft<=-552){//图片滚到一半时，让图片回来。
oul.style.left = '0px';
}
if(oul.offsetLeft>0){//图片向右刚一移动时，让图片的一半显示在左边
oul.style.left = '-552px';
}
}
left.onclick = function(){
clearInterval(time);
time = setInterval(move,30);
speed = -2;
}
right.onclick = function(){
clearInterval(time);
time = setInterval(move,30);
speed = 2;
}
</script>
</body>
</html>

0 0