JavaScript我这个无缝滚动为什么还有明显的停顿？？
求大神改正<html><head><styletype="text/css">*{margin:0;padding:0;}#div2{width:600px;overfl...
求大神改正
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#div2{width:600px;overflow:hidden;position:relative;left:200px;}
#div1{position:relative;left:0px;width:1200px;}
#div1 li{list-style-type: none;float:left;width:200px;height: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;
oBtn.onclick=function(){
clearInterval(t);
t=setInterval(function(){
if(oDiv.offsetLeft<=-oUl.offsetWidth/2)
{
oDiv.style.left=0+'px';
}
else
{
oDiv.style.left=oDiv.offsetLeft-22+'px';
};
},55);
};
} ；
</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> 展开
<html>
<head>
<style type="text/css">
*{margin:0;padding:0;}
#div2{width:600px;overflow:hidden;position:relative;left:200px;}
#div1{position:relative;left:0px;width:1200px;}
#div1 li{list-style-type: none;float:left;width:200px;height: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;
oBtn.onclick=function(){
clearInterval(t);
t=setInterval(function(){
if(oDiv.offsetLeft<=-oUl.offsetWidth/2)
{
oDiv.style.left=0+'px';
}
else
{
oDiv.style.left=oDiv.offsetLeft-22+'px';
};
},55);
};
} ；
</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> 展开
1个回答
展开全部
卡顿的问题有两个因素影响了，一个是：向左移动的速度必须为div宽度能整除的数，要不减到最后判断的时候会有余量。二个是：判断的时候已经到了边界了，所以应该执行下一次。修改的例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无缝滚动</title>
<style type="text/css">
*{margin:0;padding:0;}
#div2{width:600px;overflow:hidden;position:relative;left:200px;}
#div1{position:relative;left:0px;width:1200px;}
#div1 li{list-style-type: none;float:left;width:200px;height: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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
