实现datalist的走马灯效果(滚动)

实现datalist的走马灯效果(滚动)

横向滚动

<table id=”Table1″ align=”center” style=”width: 650px; height: 100px” cellspacing=”0″
        cellpadding=”0″ border=”0″>
        <tr>
            <td>
                <div id=”demo” style=”overflow: hidden; width: 650px; height: 100px” align=”center”
                    designtimedragdrop=”134″>
                    <table>
                        <tr>
                            <td id=”demo1″ valign=”middle”>
                                <asp:DataList ID=”DataList1″ runat=”server” Width=”650px”

RepeatDirection=”Horizontal”>
                                    <ItemTemplate>
                                        <table id=”Table2″ cellspacing=”0″ cellpadding=”0″ width=”102″

border=”0″>
                                            <tr>
                                                <td>
                                                    <img  src=’<%#DataBinder.Eval

(Container.DataItem,”tp”)%>’ border=”0″></td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </asp:DataList>
                            </td>
                            <td id=”demo2″ valign=”top”>
                            </td>
                        </tr>
                    </table>
                </div>
            </td>
        </tr>
    </table>

    <script type=”text/javascript”>
    var  Picspeed=10; ///滚动速度 越小越快
    demo2.innerHTML=demo1.innerHTML;
    function Marquee1()
    {
        if(demo2.offsetWidth-demo.scrollLeft   <=0)
            demo.scrollLeft-=demo1.offsetWidth
        else
        {
            demo.scrollLeft++
        }
    }
    var  MyMar1=setInterval(Marquee1,Picspeed);
    demo.οnmοuseοver=function(){clearInterval(MyMar1)}
    demo.οnmοuseοut=function(){MyMar1=setInterval(Marquee1,Picspeed)}
    </script>
 

 

纵向滚动

 

 

<div id=”ldh”>
                <div id=”newsBlock”>
                    <div style=”text-align:center” id=”subBlock”>
                        <asp:Repeater ID=”rptLdh” runat =”server” >
                        <ItemTemplate>
                        <div>
                            <img width=”175px” src=’/xiaofei/html/images/<%#Eval(”tp”) %>’>
                        </div>
                        </ItemTemplate>
                        </asp:Repeater>
                       
                       
                    </div>
                </div>

                <script>  
              var   block   =   document.all["newsBlock"]  
              block.insertAdjacentHTML(”beforeEnd”   ,   block.children[0].outerHTML)  
              block.runtimeStyle.overflow =   “hidden”  
               
              setInterval(function()  
              {  
              block.scrollTop++  
              block.runtimeStyle.height =   block.children[0].offsetHeight  
              if   ((block.scrollTop   +   block.children[0].offsetHeight)   ==   block.scrollHeight)

block.scrollTop   =   1  
              },20)  
                </script>

            </div>