Javascript 实现图片无缝滚动
效果：鼠标移入图片停止滚动，鼠标移出自动滚动
可以调整向左或右方向滚动
<styletype="text/css">
*{
margin:0;
padding:0;
}
#div1{
overflow:hidden;
width:712px;
height:108px;
margin:100pxauto;
position:relative;
background:red;
}
#div1ul{
position:absolute;
left:0;
top:0;
}
#div1ulli{
float:left;
width:178px;
height:108px;
list-style:none;
}
</style>
<body>
<ahref="javascript:;">向左走</a>
<ahref="javascript:;">向右走</a>
<divid="div1">
<ul>
<li>
<imgsrc="img/无缝滚动/1.jpg"/>
</li>
<li>
<imgsrc="img/无缝滚动/2.jpg"/>
</li>
<li>
<imgsrc="img/无缝滚动/3.jpg"/>
</li>
<li>
<imgsrc="img/无缝滚动/4.jpg"/>
</li>
</ul>
</div>
</body>
以上是一个简单的布局，下面是主要的Javascript代码
<scripttype="text/javascript">
window.onload=function(){
varoDiv=document.getElementById("div1");
varoUl=oDiv.getElementsByTagName('ul')[0];
varaLi=oUl.getElementsByTagName('li');
varspeed=2;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
functionmove(){
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+speed+'px';
}
vartimer=setInterval(move,30);
oDiv.onmouseover=function(){
clearInterval(timer);
};
oDiv.onmouseout=function(){
timer=setInterval(move,30);
};
document.getElementsByTagName('a')[0].onclick=function(){
speed=-2;
};
document.getElementsByTagName('a')[1].onclick=function(){
speed=2;
};
}
</script>
简单讲下思路：
首先设置ul里面的图片一共有8张oUl.innerHTML+=oUl.innerHTML;
在计算ul的宽度为li的实际宽度*8
之后将多余的内容隐藏
注意：oUl.offsetLeft肯定是负值
所以判断的时候不要把负号漏掉
if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0';
}