图片无缝滚动的问题？

jsyzyr 2010-09-25 05:44:56

请问我下面的图片无缝滚动代码有什么问题啊？滚动了一段时间就不滚动了？



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style type="text/css">

#demo

{

  background:#FFF;

  overflow:hidden;

  border:1px dashed #CCC;

  width:500px;

}

#demo img

{

   border:3px solid #F2F2F2;

   width:100px;

   height:100px;

}

#indemo

{

  float:left;

  width:300%;

}

#demo1

{

   float:left;

}

</style>

</head>



<body>

<div id="demo">

    <div id="indemo">

	    <div id="demo1">

		<img src="1.jpg" border="0"/><img src="2.jpg" />

		<img src="3.jpg" border="0"/><img src="4.jpg" />

		<img src="5.jpg" border="0"/><img src="6.jpg" />

		</div>

		<div id="demo2"></div>

	</div>

</div>

<script language="javascript">

   var speed=10;  //数字越大速度越慢

   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>

</body>

</html>

...全文

216 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

xb12369 2012-11-16

打赏
举报

wwfgu00ing 2010-09-25

打赏
举报

各个方向的无缝滚动

huangwenquan123 2010-09-25

打赏
举报

以前遇到过！
因为indemo不够宽！
你把demo的overflow先设置成scroll,看下有没有在一列！
如果有的图片在第二列把宽设置成更大点就可以！

wuyq11 2010-09-25

打赏
举报

<div class="dxzspic">
<div id=demo style="OVERFLOW: hidden; WIDTH: 925px; align: center">
<table cellspacing="0" cellpadding="0" align="center"
border="0">
<tbody>
<tr>
<td id="marquePic1" valign="top">
</td>
<td id="marquePic2" valign="top"></td>
</tr>
</tbody>
</table>
</div>
<script type=text/javascript>
var speed=30
marquePic2.innerHTML=marquePic1.innerHTML
function Marquee(){
if(demo.scrollLeft>=marquePic1.scrollWidth){
demo.scrollLeft=0
}else{
demo.scrollLeft++
}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

</div>