<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS运动之无缝滚动</title>
<style>
*{margin:0px;padding:0px}
#div1{width:800px; height:111px; margin:100px auto; position:relative; background:blue; overflow:hidden;}
#div1 ul{position:absolute; left:0; top:0;}
#div1 ul li {float:left; width:200px; height:111px; list-style:none;}
</style>
<script>
window.function()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var speed=2;
oUl.innerHTML= oUl.innerHTML+ oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; //ul的宽度等于·任意一个li的宽度乘以li的个数
function roll(){
if(oUl.offsetLeft<-oUl.setWidth/2) //因为向左滚动，其值为负，但宽度须为正，故前面加个负号使其为正
{
oUl.style.left='0';
}
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+speed+'px';
}
var timer=setInterval(roll,30);
oDiv.onmouseover=function()
{
clearInterval(timer);
};
oDiv.onmouseout=function()
{
timer=setInterval(roll,30);
};
document.getElementsByTagName('a')[0].onclick=function()
{
speed=-2;
};
document.getElementsByTagName('a')[1].onclick=function()
{
speed=2;
};
};
</script>
</head>
<body>
<a href="javascript:;">左走</a>
<a href="javascript:;">右走</a>
<div id="div1">
<ul>
<li><img src="img/1.png" /></li>
<li><img src="img/2.png" /></li>
<li><img src="img/3.png" /></li>
<li><img src="img/4.png" /></li>
</ul>
</div>
</body>
</html>
以上是我为大家分享的无缝滚动的代码，希望对大家的学习有所帮助，仅供参考。
1810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
