卡顿的问题有两个因素影响了,一个是:向左移动的速度必须为div宽度能整除的数,要不减到最后判断的时候会有余量。二个是:判断的时候已经到了边界了,所以应该执行下一次。修改的例子:
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无缝滚动</title>
<style type="text/css">
*{margin:0padding:0}
#div2{width:600pxoverflow:hiddenposition:relativeleft:200px}
#div1{position:relativeleft:0pxwidth:1200px}
#div1 li{list-style-type: nonefloat:leftwidth:200pxheight:180px
}
img{width:100%height:100%}
</style>
<script>
window.onload=function(){
var oUl=document.getElementById('ul1')
var oDiv=document.getElementById('div1')
var oBtn=document.getElementById('btn1')
var t=0
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML
var speed = 20//速度,必须是oUl.offsetWidth能整除的数;
oBtn.onclick=function(){
clearInterval(t)
t=setInterval(function(){
if(oDiv.offsetLeft <= -oUl.offsetWidth/2){
oDiv.style.left = -speed+'px'//因为判断的时候已经到了边界了,所以应该执行下次
}else{
oDiv.style.left = oDiv.offsetLeft - speed+'px'
}
},50)
}
}
</script>
</head>
<body>
<input id="btn1" value="开始" type="button"/>
<div id="div2">
<div id="div1">
<ul id="ul1">
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
</ul>
</div>
</div>
</body>
</html>
因为#scroll和#wrap上面都有一些关键样式,尤其的#scroll js事件就是控制它的。如果真要去一个,要把#wrap的样式写到#scroll里,主要相同的样式别冲突,当然最好是别去掉。