<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝图片左右播放案例</title>
</head>
<style>
.container{
width: 600px;
overflow: hidden;
position:relative;
}
ul{
list-style: none;
position:relative;
height: 400px;
left:0;
}
li{
float: left;
width: 300px;
}
img{
width: 300px;
height: 400px;
}
</style>
<body>
<input type="button" value="prev" id="prev">
<input type="button" value="next" id="next">
<div class="container">
<ul>
<li><img src="img/1.png" alt=""></li>
<li><img src="img/2.png" alt=""></li>
<li><img src="img/3.png" alt=""></li>
<li><img src="img/4.png" alt=""></li>
<li><img src="img/5.jpg" alt=""></li>
<li><img src="img/6.jpg" alt=""></li>
</ul>
</div>
<script type="text/javascript">
var oUl = document.getElementsByTagName('ul')[0];
var oLi = oUl.getElementsByTagName('li');
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var isNow = 0;
oUl.innerHTML+= oUl.innerHTML;
oUl.style.width = oLi.length * oLi[0].offsetWidth + 'px';
oPrev.onclick = function () {
if(isNow == 0 ){
isNow = oLi.length/2;
oUl.style.left = -oUl.offsetWidth/2 + 'px';
}
moveLeft(oUl,-isNow*oLi[0].offsetWidth,-(isNow-1)*oLi[0].offsetWidth);
isNow--;
}
oNext.onclick = function () {
if(isNow == oLi.length/2 ){
isNow = 0;
oUl.style.left = 0;
}
moveLeft(oUl,-isNow*oLi[0].offsetWidth,-(isNow+1)*oLi[0].offsetWidth);
isNow++;
}
function moveLeft(obj,old,now){
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = (now -old) /10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(now == old){
clearInterval(obj.timer);
}else{
old += speed;
oUl.style.left = old + 'px';
}
},30)
}
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
