前台代码:
<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(); }