JavaScript为什么这个别人写的无缝滚动的随便改速度就没事？
第一个是我写的为什么会出现图片抖动有人说速度除不尽所以会抖动下面第二个代码是别人的写的和我的差不多为什么他的那个代码的速度随便改都没事呢我的这个却不行呢这是为什么呢？我的...
第一个是我写的 为什么会出现图片抖动 有人说速度除不尽 所以会抖动 下面第二个代码是别人的 写的和我的差不多 为什么他的那个代码的速度随便改都没事呢 我的这个却不行呢 这是为什么呢？
我的代码：
<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>
别人的：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div1 ul {position:absolute; left:0; top:0;}
#div1 ul li {float:left; width:178px; height:108px; list-style:none;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
setInterval(function (){
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0';
}
oUl.style.left=oUl.offsetLeft-2+'px';
}, 30);
};
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img2/1.jpg" /></li>
<li><img src="img2/2.jpg" /></li>
<li><img src="img2/3.jpg" /></li>
<li><img src="img2/4.jpg" /></li>
</ul>
</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>
别人的：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}
#div1 ul {position:absolute; left:0; top:0;}
#div1 ul li {float:left; width:178px; height:108px; list-style:none;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
setInterval(function (){
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0';
}
oUl.style.left=oUl.offsetLeft-2+'px';
}, 30);
};
</script>
</head>
<body>
<div id="div1">
<ul>
<li><img src="img2/1.jpg" /></li>
<li><img src="img2/2.jpg" /></li>
<li><img src="img2/3.jpg" /></li>
<li><img src="img2/4.jpg" /></li>
</ul>
</div>
</body>
</html> 展开
展开全部
你自己对比两段代码难道没看出区别吗？
if(oDiv.offsetLeft<=-oUl.offsetWidth/2)
{
oDiv.style.left=0+'px';
}
else
{
oDiv.style.left=oDiv.offsetLeft-22+'px';
};
改为
if(oDiv.offsetLeft<=-oUl.offsetWidth/2)
{
oDiv.style.left=0+'px';
}
oDiv.style.left=oDiv.offsetLeft-22+'px';
那么你的代码就与下面那个一致了。
if(oDiv.offsetLeft<=-oUl.offsetWidth/2)
{
oDiv.style.left=0+'px';
}
else
{
oDiv.style.left=oDiv.offsetLeft-22+'px';
};
改为
if(oDiv.offsetLeft<=-oUl.offsetWidth/2)
{
oDiv.style.left=0+'px';
}
oDiv.style.left=oDiv.offsetLeft-22+'px';
那么你的代码就与下面那个一致了。
追问
改成这样就不会动了啊
追答
我不知道你怎么回事，我这里每次都是测试通过后我才把答案放上来的。你可以换各种浏览器去试一下嘛。你发的两段代码我都运行了（当然图片是用我自己电脑上的），对比运行效果完全一样后我才把代码放上来的。如果实在不行，那我也没法帮你了，我记得你这个问题我已经是第三次回答你了，为了这么一个简单问题实在是浪费时间。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
