javascript实现滚动图片

来源:岁月联盟 编辑:exp 时间:2012-06-29

/
前台:

[html]
<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> 
 <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:
[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)}; 
    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)};

作者:shan9liang