js实现图片的无缝滚动

来源：互联网发布：全套钓鱼工具淘宝编辑：程序博客网时间：2024/05/16 01:17

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
body{padding: 100px;}
div{border: 1px solid red;width: 720px;height: 165px;position: relative; overflow: hidden;}
ul{position: absolute;top:0;left: 0;}
ul li{float: left;}
</style>
<script type="text/javascript">
window.onload=function(){
var oImglist=document.getElementById('imglist');
var aLi=oImglist.getElementsByTagName('li');
var oLeft=document.getElementById('left');
var oRight=document.getElementById('right');
var speed=-5//声明一个速度变量
var time=null;//声明一个null的变量
oImglist.innerHTML=oImglist.innerHTML+oImglist.innerHTML;//oImglist表示ul，innerHTML表示元素里面的内容，oImglist.innerHTML则表示ul里面的内容，实际就是ul里面的li，这句代码意思就是ul里面的li个数增加一倍，上图;

oImglist.style.width=aLi[0].offsetWidth*aLi.length+'px';//动态设置ul的宽度，每一个li的宽度乘以li的个数，即为ul的宽度
function dong(){
if(oImglist.offsetLeft<=-oImglist.offsetWidth/2){//判断ul离左边的距离，如果离左边距离为ul宽度的一半，就把ul拉回来，上图详解

oImglist.style.left="0px";
}
else if(oImglist.offsetLeft>=0){//与上面同理
oImglist.style.left=-oImglist.offsetWidth/2+'px';
}
oImglist.style.left=oImglist.offsetLeft+speed+"px";
}
time=setInterval(dong,100);
oLeft.onclick=function(){
speed=-5;
};
oRight.onclick=function(){
speed=5;
};
oImglist.onmouseover=function(){
clearInterval(time);
};
oImglist.onmouseout=function(){
time=setInterval(dong,100);
};
};
</script>
</head>
<body>
<input type="button" value="<<" id="left" />
<input type="button" value=">>" id="right" />
<div>
<ul id="imglist">
<li><img src="../img/01.jpg" alt="" /></li>
<li><img src="../img/02.jpg" alt="" /></li>
<li><img src="../img/03.jpg" alt="" /></li>
<li><img src="../img/04.jpg" alt="" /></li>
<li><img src="../img/11.jpg" alt="" /></li>
<li><img src="../img/12.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>

0 0