从数据库中读取一组图片数据并使其做向左的无缝滚动

    技术2025-09-30  40

    前台代码:

    <div id="scroll_div" style="width:300px">                                       <div id="demoleft" style="overflow: hidden; width: 300px; color: #ff0000">                                           <table border="0" cellpadding="2" cellspacing="1" cellspace="0">                                               <tbody>                                                   <tr>                                                       <td id="demo1left" valign="top" align="middle">                                                           <table width="300px" border="0" align="center" cellpadding="5" cellspacing="3">                                                               <tbody>                                                                   <tr align="middle">                                                                       <asp:Repeater ID="repeaterimg" runat="server">                                                                           <ItemTemplate>                                                                               <td height="100px" valign="top">                                                                                   <div align="center">                                                                                       <a href='CaseDetail.aspx?cid=<%#Eval("CaseID") %>' target="_blank">                                                                                           <img alt="" src='<%#Eval("CaseImage") %>' width="145px" height="96px" border="0" />                                                                                       </a>                                                                                   </div>                                                                               </td>                                                                           </ItemTemplate>                                                                       </asp:Repeater>                                                                   </tr>                                                               </tbody>                                                           </table>                                                       </td>                                                       <td id="demo2left" valign="top">                                                       </td>                                                   </tr>                                               </tbody>                                           </table>                                       </div>                                       <mce:script type="text/javascript"><!--                                           var speed=20//速度数值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值                                           demo2left.innerHTML=demo1left.innerHTML                                           function Marquee(){                                           if(demo2left.offsetWidth-demoleft.scrollLeft<=0)//其实demo.scrollLeft是有 最大值的,和demo0.width,引用的图片的width有关系。demo过了一半(每半内容一样的),重新开始循环                                           demoleft.scrollLeft-=demo1left.offsetWidth                                           else{                                           demoleft.scrollLeft++//不断的增加,相当于父容器的滚动条不断是缩小;但由于OVERFLOW: hidden; (滚动条不可见)                                           }                                           }                                           var MyMarleft=setInterval(Marquee,speed)                                           demoleft.οnmοuseοver=function() {clearInterval(MyMarleft)}                                           demoleft.οnmοuseοut=function() {MyMarleft=setInterval(Marquee,speed)}                                          // --></mce:script>                                   </div> 

    后台代码:

    private void pereaterimgbind()   {       string sql = "select top 5 * from YXCase order by CaseID desc";       repeaterimg.DataSource = help.RunDataAdapter(sql);       repeaterimg.DataBind();   }  

    最新回复(0)