这个是asp.net做的网站项目用的走马灯,由于需要各个浏览器支持,所以也是采用js,而没有使用marquee标签.
在这儿由于项目的需要,是将绑定数据库的datalist控件中的图片做成走马灯形式了,就是将最新的15个产品的图片动态在首页以走马灯形式显示

aspx页面代码:
 

  1. <!--以下走馬燈 -->  
  2. <div align="center">  
  3.     <div id="demo" style="overflow: hidden; width: 300px; height: 87px; text-align: center;">  
  4.         <table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#F0F0F0">  
  5.             <tr>  
  6.                 <td id="demo1">  
  7.                     <asp:DataList ID="dlMovingBar" runat="server" Width="300px" RepeatColumns="15" DataSourceID="sqlsourcemovingbar">  
  8.                         <ItemTemplate>  
  9.                             <a href="popup.aspx?id=<%# Eval("sys_id") %>">  
  10.                                 <img alt="" src="UploadFiles/<%# Eval("pdt_file1") %>" width="87" height="87" border="0" /></a>  
  11.                         </ItemTemplate>  
  12.                     </asp:DataList>  
  13.                     <asp:SqlDataSource ID="sqlsourcemovingbar" runat="server" ConnectionString="<%$ ConnectionStrings:db_bizConnectionString %>" 
  14.                         SelectCommand="select top 15 * from tb_service where pdt_state=1 and pdt_file1<>'' and pdt_file1<>'spacer.gif'  order by sys_id desc">  
  15.                     </asp:SqlDataSource>  
  16.                 </td>  
  17.                 <td id="demo2">  
  18.                 </td>  
  19.             </tr>  
  20.         </table>  
  21.     </div>  
  22. </div>  
  23.  
  24. <script language="JavaScript" type="text/JavaScript">   
  25.       var demo=document.getElementById("demo");  
  26.       var demo1=document.getElementById("demo1");  
  27.       var demo2=document.getElementById("demo2");  
  28.       var speed=20;  
  29.       demo2.innerHTML=demo1.innerHTML;  
  30.       function Marquee(){  
  31.       if(demo2.offsetWidth-demo.scrollLeft<=0)  
  32.       demo.scrollLeft-=demo1.offsetWidth;  
  33.       else{  
  34.       demo.scrollLeft++;  
  35.       }  
  36.       }  
  37.       var MyMar=setInterval(Marquee,speed);  
  38.       demo.onmouseover=function() {clearInterval(MyMar);}  
  39.       demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);}  
  40. </script>  
  41.  
  42. <!-- 以上走馬燈--> 

 效果參考網站:

http://metrobiz.metroradio.com.hk/