JavaScript我这个无缝滚动为什么还有明显的停顿??

html-css012

JavaScript我这个无缝滚动为什么还有明显的停顿??,第1张

卡顿的问题有两个因素影响了,一个是:向左移动的速度必须为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里,主要相同的样式别冲突,当然最好是别去掉。