JavaScript 图片滚动特效出现两行图片？怎么修改代码？
如图，网页上出现了两行图片，我只需要一行即可。代码如下，不知道需要做什么修改？<css>#demo{background:#f3f3f3;margin:0auto;wid...
如图，网页上出现了两行图片，我只需要一行即可。代码如下，不知道需要做什么修改？
<css>
#demo{background: #f3f3f3;margin:0 auto;width:900px;overflow:hidden;margin-top:10px;border:1px dashed #CCC;}
#indemo {float: left;width: 800%;}
#indemo ul#tu{margin:0px;padding:10px 20px;}
#indemo ul#tu img {padding:0px 10px;}
#indemo li{float:left;text-align:center;list-style:none;}
#indemo li a{display:block;height:200px;line-height:90px;background:#e2e2e2;}
#indemo li span{ display:block; text-align:center;font-size:12px;height:20px;line-height:20px;}
#indemo {float:left;width:800%;}
#demo1 {float:left;}
#demo2 {float:left;}
</css>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul id="tu">
<li><a href="#"><img src="images/jianying/1.jpg" border="0" /></a><span>文字一</span></li>
<li><a href="#"><img src="images/jianying/2.jpg" border="0" /></a><span>文字二</span></li>
...(PS：省略一部分重复的置入<image>代码)
<li><a href="#"><img src="images/jianying/3.jpg" border="0" /></a><span>文字三</span></li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=20;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script> 展开
<css>
#demo{background: #f3f3f3;margin:0 auto;width:900px;overflow:hidden;margin-top:10px;border:1px dashed #CCC;}
#indemo {float: left;width: 800%;}
#indemo ul#tu{margin:0px;padding:10px 20px;}
#indemo ul#tu img {padding:0px 10px;}
#indemo li{float:left;text-align:center;list-style:none;}
#indemo li a{display:block;height:200px;line-height:90px;background:#e2e2e2;}
#indemo li span{ display:block; text-align:center;font-size:12px;height:20px;line-height:20px;}
#indemo {float:left;width:800%;}
#demo1 {float:left;}
#demo2 {float:left;}
</css>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<ul id="tu">
<li><a href="#"><img src="images/jianying/1.jpg" border="0" /></a><span>文字一</span></li>
<li><a href="#"><img src="images/jianying/2.jpg" border="0" /></a><span>文字二</span></li>
...(PS：省略一部分重复的置入<image>代码)
<li><a href="#"><img src="images/jianying/3.jpg" border="0" /></a><span>文字三</span></li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=20;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script> 展开
展开全部
你有两个div,demo1和demo2,都显示的话就是两行，隐藏一个就行了，
如下改样式：添加display:none
#demo1 {float:left;display:none}
如下改样式：添加display:none
#demo1 {float:left;display:none}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给demo 一个高度；overflow：hidden；估计还要给indemo一个很宽的宽度
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
引用wxjoyyf的回答：
你有两个div,demo1和demo2,都显示的话就是两行，隐藏一个就行了，
如下改样式：添加display:none
#demo1 {float:left;display:none}
你有两个div,demo1和demo2,都显示的话就是两行，隐藏一个就行了，
如下改样式：添加display:none
#demo1 {float:left;display:none}
展开全部
这样的结果就是图片滚动完不会再重新开始
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
