当前位置：首页 → 问答吧 → 图片向左滚动效果，为什么只有一张图片，却显示了两张，而且不动呢

图片向左滚动效果，为什么只有一张图片，却显示了两张，而且不动呢

时间：2010-05-14

来源：互联网

<div id="colee_left" style="overflow:hidden;width:500px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="colee_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><p><img src="http://www.alixixi.com/images/noimg.gif" width="100" height="100"></p></td> </tr> </table> </td> <td id="colee_left2" valign="top"></td> </tr> </table> </div> <script> //使用div时，请保证colee_left2与colee_left1是在同一行上. var speed=30//速度数值越大速度越慢 var colee_left2=document.getElementById("colee_left2"); var colee_left1=document.getElementById("colee_left1"); var colee_left=document.getElementById("colee_left"); colee_left2.innerHTML=colee_left1.innerHTML function Marquee3(){ if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度 else{ colee_left.scrollLeft++ } } var MyMar3=setInterval(Marquee3,speed) colee_left.onmouseover=function() {clearInterval(MyMar3)} colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} </script>
提示：您可以先修改部分代码再运行

这是一个图片向左滚动的效果，我只有一张图片，为什么显示了两张呢？而且不动

[ 本帖最后由 yinblue 于 2010-5-15 09:49 编辑 ]

作者: yinblue 发布时间: 2010-05-14

是不是变换的图片没有达到张数呀

作者: yinblue 发布时间: 2010-05-14

在网上找了很多，都是这种情况的

作者: yinblue 发布时间: 2010-05-15

图片少
图个总宽度加起来应该大于外部的div
两个的原因是滚动的原理就是 demo2 复制demo1的图片

作者: zhaodidong 发布时间: 2010-05-15

那有没有办法解决这个问题呢

作者: yinblue 发布时间: 2010-05-15

<div id="colee_left" style="overflow:hidden;width:50px;"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td id="colee_left1" valign="top" align="center"> <table cellpadding="2" cellspacing="0" border="0"> <tr align="center"> <td><p><img src="http://www.alixixi.com/images/noimg.gif" width="100" height="100"></p></td> </tr> </table> </td> <td id="colee_left2" valign="top"></td> </tr> </table> </div> <script> //使用div时，请保证colee_left2与colee_left1是在同一行上. var speed=30//速度数值越大速度越慢 var colee_left2=document.getElementById("colee_left2"); var colee_left1=document.getElementById("colee_left1"); var colee_left=document.getElementById("colee_left"); colee_left2.innerHTML=colee_left1.innerHTML function Marquee3(){ if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度 colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度 else{ colee_left.scrollLeft++ } } var MyMar3=setInterval(Marquee3,speed) colee_left.onmouseover=function() {clearInterval(MyMar3)} colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)} </script>
提示：您可以先修改部分代码再运行

容器宽度小于图片总宽度就行了

作者: hsb008 发布时间: 2010-05-15

但是数据库里面取出来的数据是不一定的哦

作者: yinblue 发布时间: 2010-05-15