帮看看这段js脚本为啥不循环?

Question

<style>
*{margin:0;line-height:24px;}
</style><div id="latest_site_news" class="colbox"> 
  <h3> <!-- {if $site_news.info.page_count gt 1} --> <em class="more"> <a href="{url src=index.php?app=article&amp;act=site_news}">{$lang.more} </a> </em> <!-- {/if} -->{$lang.site_news} </h3> 
  
<div id="news_scroll_bar" style="overflow:hidden; height:180px;"> 
  <div id="news_scroll_items" class="colboxcontent"> 
  <ul> 
      <!-- {foreach from=$site_news.data item=article} --> 
      <li> 1<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
      <li> 2<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
      <li> 3<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
      <li> 4<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
      <li> 5<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
      <li> 6<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
      <li> 7<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
      <li> 8<a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
      <!-- {/foreach} --> 
    </ul> 
  </div> 
  <div id="news_scroll_replaces" class="colbtm"> </div> 
  </div> 
</div> <script language="javascript"> 
var news_scroll_bar = document.getElementById("news_scroll_bar"); 
var news_scroll_items = document.getElementById("news_scroll_items"); 
var news_scroll_replaces = document.getElementById("news_scroll_replaces"); 
var speed  = 20;//滚动速度 alert(news_scroll_items.offsetHeight)
news_scroll_replaces.innerHTML=news_scroll_items.innerHTML 
function Marquees(){if(news_scroll_replaces.offsetTop-news_scroll_bar.scrollTop <=0) 
news_scroll_bar.scrollTop-=news_scroll_items.offsetHeight +20
else{ 
news_scroll_bar.scrollTop++ 
} 
} 
var MyMars=setInterval(Marquees,speed) 
news_scroll_bar.onmouseover=function() {clearInterval(MyMars)} 
news_scroll_bar.onmouseout=function() {MyMars=setInterval(Marquees,speed)} 
</script> 
效果见:www.web-pifa.com  站内快讯那块

Answer 1

<style> 
*{margin:0;line-height:24px;} 
</style> <div id="latest_site_news" class="colbox"> 
  <h3> <!-- {if $site_news.info.page_count gt 1} --> <em class="more"> <a href="{url src=index.php?app=article&amp;act=site_news}">{$lang.more} </a> </em> <!-- {/if} -->{$lang.site_news} </h3> 
  
<div id="news_scroll_bar" style="overflow:hidden; height:180px;"> 
  <div id="news_scroll_items" class="colboxcontent"> 
  <ul> 
      <!-- {foreach from=$site_news.data item=article} --> 
      <li> <a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
           <!-- {/foreach} --> 
    </ul> 
  </div> 
  <div id="news_scroll_replaces" class="colbtm"> </div> 
  </div> 
</div> <script language="javascript"> 
var news_scroll_bar = document.getElementById("news_scroll_bar"); 
var news_scroll_items = document.getElementById("news_scroll_items"); 
var news_scroll_replaces = document.getElementById("news_scroll_replaces"); 
var speed  = 20;//滚动速度 alert(news_scroll_items.offsetHeight) 
news_scroll_replaces.innerHTML=news_scroll_items.innerHTML 
function Marquees(){ if(news_scroll_replaces.offsetTop-news_scroll_bar.scrollTop <=0) 
news_scroll_bar.scrollTop-=news_scroll_items.offsetHeight +20 
else{ 
news_scroll_bar.scrollTop++ 
} 
} 
var MyMars=setInterval(Marquees,speed) 
news_scroll_bar.onmouseover=function() {clearInterval(MyMars)} 
news_scroll_bar.onmouseout=function() {MyMars=setInterval(Marquees,speed)} 
</script> 

Answer 2

 caiying2009,帮我有时间看下,那个一圈一圈之间的距离怎么调整

Answer 3

<div id="news_scroll_bar" style="overflow:hidden; height:180px;"> 
  <div id="news_scroll_items" class="colboxcontent"> 
  <ul> 
      <!-- {foreach from=$site_news.data item=article} --> 
      <li> <a href="{url src=index.php?app=article&amp;act=site_news&amp;id=$article.article_id}">{$article.title|escape} </a> </li> 
          <!-- {/foreach} --> 
    </ul> 
  </div> 
  <div id="news_scroll_replaces" class="colbtm"> </div> 
  </div> 
</div>=========================
主要看这几行
1、news_scroll_items为需要循环体内容，你现在只有一行，高度为24。（一个li为一行）
2、而news_scroll_bar 为循环体，高度定义为180 ，大于 24 所以  导致参数 news_scroll_bar.scrollTop 永远为0。
结论：如果修改了循环内容的行数，则需要相应的修改news_scroll_bar 中height:180px 的值，使其小于循环内容的高度。