<div id="demo" style="width:780px;height:150px;overflow:hidden"><div id="demo1">
<asp:DataList ID="DataList1" runat="server" DataSourceID="AccessDataSource1" DataKeyField="id" RepeatDirection="Horizontal">
    <ItemTemplate>
        
            <table>
                <tr>
                    <td style="width:100px;height:100px">
                        <img src='<%# "images/"+Eval("图片") %>'  /></td>
                </tr>
                <tr>
                    <td style="height:30px">
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("类别名称") %>'></asp:Label></td>
                </tr>
            </table>
    
      
    </ItemTemplate>
</asp:DataList>
</div>
<div id="demo2"></div>
</div>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/myDB.mdb" SelectCommand="SELECT [id], [类别名称], [图片] FROM [产品类别]"></asp:AccessDataSource>
<script language="javascript" type="text/javascript">
  var speed=20
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
  if(demo2.offsetWidth-demo.scrollLeft<=0)
  demo.scrollLeft-=demo1.offsetWidth
  else{
     
  demo.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function() {clearInterval(MyMar)}
  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>