JS和CSS中关于无缝滚动的问题？ 35
<style>body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea...
<style>
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word} body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
#scroll{ height:286px; position:relative; margin:50px auto 0; }
#wrap{height:286px; width:660px; position:relative; margin:0 auto;overflow:hidden; }
#scroll ul{position:absolute; left:0;}
#scroll li{float:left; width:220px; height:286px; text-align:center;/* margin:10px;为什么不行？*/}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var oDiv=document.getElementById('scroll');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var timer=null;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
timer=setInterval(function(){
oUl.style.left=oUl.offsetLeft-5+'px';
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0px';
}
},30)
}
</script>
</head>
<body>
<div id="scroll">
<div id="wrap">
<ul>
<li><img src="99.jpg" /></li>
<li><img src="33.jpg" /></li>
<li><img src="55.jpg" /></li>
<li><img src="77.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>
PS:无缝滚动的图片宽是200PX，属于由右向左滚动的。第一个问题在CSS代码里面。第二个问题是关于布局的<div id="scroll"> <div id="wrap"> <ul> <li><img src="99.jpg" /></li> <li><img src="33.jpg" /></li> <li><img src="55.jpg" /></li> <li><img src="77.jpg" /></li> </ul> </div></div>为什么需要两个div（这两个div就是<div id="scroll"><div id="wrap">）？只要一个的时候会出错。
<div id="scroll">
<div id="wrap">
<ul>
<li><img src="99.jpg" /></li>
<li><img src="33.jpg" /></li>
<li><img src="55.jpg" /></li>
<li><img src="77.jpg" /></li>
</ul>
</div>
</div>
这里为什么需要两个div？ 展开
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word} body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
#scroll{ height:286px; position:relative; margin:50px auto 0; }
#wrap{height:286px; width:660px; position:relative; margin:0 auto;overflow:hidden; }
#scroll ul{position:absolute; left:0;}
#scroll li{float:left; width:220px; height:286px; text-align:center;/* margin:10px;为什么不行？*/}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function()
{
var oDiv=document.getElementById('scroll');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var timer=null;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';
timer=setInterval(function(){
oUl.style.left=oUl.offsetLeft-5+'px';
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0px';
}
},30)
}
</script>
</head>
<body>
<div id="scroll">
<div id="wrap">
<ul>
<li><img src="99.jpg" /></li>
<li><img src="33.jpg" /></li>
<li><img src="55.jpg" /></li>
<li><img src="77.jpg" /></li>
</ul>
</div>
</div>
</body>
</html>
PS:无缝滚动的图片宽是200PX，属于由右向左滚动的。第一个问题在CSS代码里面。第二个问题是关于布局的<div id="scroll"> <div id="wrap"> <ul> <li><img src="99.jpg" /></li> <li><img src="33.jpg" /></li> <li><img src="55.jpg" /></li> <li><img src="77.jpg" /></li> </ul> </div></div>为什么需要两个div（这两个div就是<div id="scroll"><div id="wrap">）？只要一个的时候会出错。
<div id="scroll">
<div id="wrap">
<ul>
<li><img src="99.jpg" /></li>
<li><img src="33.jpg" /></li>
<li><img src="55.jpg" /></li>
<li><img src="77.jpg" /></li>
</ul>
</div>
</div>
这里为什么需要两个div？ 展开
1个回答
展开全部
因为#scroll和#wrap上面都有一些关键样式，尤其的#scroll js事件就是控制它的。如果真要去一个，要把#wrap的样式写到#scroll里，主要相同的样式别冲突，当然最好是别去掉。
追问
其实最后我自己发现问题了，是前面的css出现问题了。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
