这篇文章主要介绍了javascript滚动图片具体实现,有需要的朋友可以参考一下
前台:
复制代码 代码如下: <div class="block"> <div class="title"> <strong>服务展示 </strong> </div> <div class="content" id="showroom"> <div class="wrapper index_footer_slide"> <div id="index_foot_slide"> <div id="in_index_foot_slide"> <div id="index_foot_slide1"> <asp:Repeater ID="repBottomPictures" runat="server"> <ItemTemplate> <a href=""> <img src='<%#Eval("ImageUrl")%>' /></a> </ItemTemplate> </asp:Repeater> </div> <div id="index_foot_slide2"> <asp:Repeater ID="Repeater1" runat="server"> <ItemTemplate> <div> <a href=""> <img src='<%#Eval("ImageUrl")%>' /></a></div> </ItemTemplate> </asp:Repeater> </div> </div> </div> </div> </div> </div>
javascript: 复制代码 代码如下: var speed=12; //数字越大速度越慢 var tab=document.getElementById("index_foot_slide"); var tab1=document.getElementById("index_foot_slide1"); var tab2=document.getElementById("index_foot_slide2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab.scrollLeft<=0) tab.scrollLeft+=tab2.offsetWidth else{ tab.scrollLeft-- } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
|