javascript还是这个问题啊 真的没人会吗？？
我做的这个无缝滚动的效果把速度加快以后明显有抖动效果这是为什么哪里不对？我把别人做的效果加速以后就没事呢我这个应该怎样改呢？<html><head><styletype=...
我做的这个无缝滚动的效果把速度加快以后明显有抖动效果 这是为什么 哪里不对 ？ 我把别人做的效果加速以后就没事呢 我这个应该怎样改呢？
<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个回答
展开全部
if(oDiv.offsetLeft<=-oUl.offsetWidth/2)
改为
if(oDiv.offsetLeft+oUl.offsetWidth/2<=22)
原因是当最后一次-22时，有可能会出现小于零的情况，这时候如果让它的left等于0，就会出现往回退的现象，也就是你说的抖动咯！所以只要在小于等于22的时候就让它等于0，就不会出现回退的现象了。不过，这样仍然有个缺陷，就是最后一次的移动会小于22，所以仍然会有轻微的不连贯现象，这个可以通过调整22这个值，使它刚好是总距离的等分值（比如总移动距离是2000，那么20就是一个理想值），这样移动就是非常平滑的匀速运动了。
改为
if(oDiv.offsetLeft+oUl.offsetWidth/2<=22)
原因是当最后一次-22时，有可能会出现小于零的情况，这时候如果让它的left等于0，就会出现往回退的现象，也就是你说的抖动咯！所以只要在小于等于22的时候就让它等于0，就不会出现回退的现象了。不过，这样仍然有个缺陷，就是最后一次的移动会小于22，所以仍然会有轻微的不连贯现象，这个可以通过调整22这个值，使它刚好是总距离的等分值（比如总移动距离是2000，那么20就是一个理想值），这样移动就是非常平滑的匀速运动了。
更多追问追答
追问
改成这样根本就不会运动了
追答
我测试是没问题的。
此外
} ；
你这里有个全角的分号，要把它删掉或者改成半角的分号
下面是我修改后的完整代码：
*{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%;}
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
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
