求助高手帮我查一下，为什么我这个无缝滚动不能实现一直循环啊？ - JavaScript论坛

已结贴√ 问题点数：20 回复次数：2

求助高手帮我查一下，为什么我这个无缝滚动不能实现一直循环啊？

<div id="demo" style="overflow:hidden;height:230px;width:424">
<div id="demo1">
<?php
while($DB->getrows()){
echo "<table><tr height=5><td width=230><a href=detail.php?id=".$DB->rows['newsid'].">".$DB->rows['newstitle']."</a></td></tr></table>";
}
?>
</div>
<div id="demo2">
</div>
</div>
<script>
var speed=10;
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
var demo=document.getElementById("demo");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight;
else{
demo.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

搜索更多相关主题的帖子: 无缝　滚动　

第 2 楼

得分:12

给你找了个类似的.

程序代码：

<body>
<TABLE width="96%">
<TR>
    <TD><marquee scrolldelay=1 width=700 ><p>任务2 向左滚动的图片及文字  任务2 向左滚动的图片及文字  任务2 向左滚动的图片及文字  任务2 向左滚动的图片及文字  任务2 </p></marquee><br><br><br></TD>
</TR>
<tr>
    <td>
    <!-- <DIV id=demo style="OVERFLOW: hidden; WIDTH: 700px; HEIGHT: 190px">
    <TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
  <TR>
      <TD id=demo1 valign=top><IMG src="images/ad-01.jpg"><IMG src="images/ad-02.jpg"><IMG src="images/ad-03.jpg"><IMG src="images/ad-04.jpg">
      </TD>
  <TD id=demo2 valign=top></TD></TR>
</TABLE></DIV> -->
<!-- <TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
  <TR>
      <TD id=demo1 valign=top>
      <IMG src="images/ad-01.jpg">
      <IMG src="images/ad-02.jpg">
      <IMG src="images/ad-03.jpg">
      <IMG src="images/ad-04.jpg">
      </TD>
  <TD id=demo2 valign=top></TD></TR>
</TABLE> -->
    <div id="demo" style="overflow: hidden;width: 700px;height: 190px;">
        <TABLE width="100%" border="0" cellpadding="0" cellspacing="0" >
        <TR>
            <TD id="demo1" valign="top">
            <img src="images/ad-01.jpg"><img src="images/ad-02.jpg"><img src="images/ad-03.jpg"><img src="images/ad-04.jpg">
            </TD>
            <TD id="demo2" valign="top">&nbsp;</TD>
        </TR>
        </TABLE>
     </div>
    </td>
</tr>
</TABLE>
</body>
<script >    
demo2.innerHTML=demo1.innerHTML  //复制demo1为demo2
function move(){
if(demo.scrollLeft>=demo2.offsetWidth)   //当滚动至demo1与demo2交界时
    demo.scrollLeft=0;    //dome跳到最左端
else
    demo.scrollLeft++;
}
var temp=setInterval(move,10)  //设置定时器
demo.onmouseover=function() {clearInterval(temp)}  //鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function() {temp=setInterval(move,10)}//鼠标移开时重设定时器，继续滚动
</script>

C#超级群 74862681，欢迎大家的到来！

第 3 楼

得分:8

php不懂。
我原来碰到过。我的问题出在这上面，给你参考。不知道是不是您的问题
1.由于滚动的页面太小，没有办法实现滚动效果，因为滚动时就会出现空白位置的情况，html无法处理
2.在滚动完一屏时，要减去已经滚动上去的html，程序觉得内部滚动页面一直存在，才能实现无限滚动。