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

来源:互联网 发布:电视哪个牌子好 知乎 编辑:程序博客网 时间:2024/05/17 20:32

前台代码:

<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.onmouseover=function() {clearInterval(MyMarleft)}  
                                        demoleft.onmouseout=function() {MyMarleft=setInterval(Marquee,speed)}  
                                      
// --></mce:script>  
                                </div> 


后台代码:

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

原创粉丝点击