你好,欢迎来到电脑编程技巧与维护杂志社! 杂志社简介广告服务读者反馈编程社区  
合订本订阅
 
 
您的位置:技术专栏 / Java专栏
javascript实现滚动图片
 

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

  推荐精品文章

·2024年12月目录 
·2024年11月目录 
·2024年10月目录 
·2024年9月目录 
·2024年8月目录 
·2024年7月目录 
·2024年6月目录 
·2024年5月目录 
·2024年4月目录 
·2024年3月目录 
·2024年2月目录 
·2024年1月目录
·2023年12月目录
·2023年11月目录

  联系方式
TEL:010-82561037
Fax: 010-82561614
QQ: 100164630
Mail:gaojian@comprg.com.cn

  友情链接
 
Copyright 2001-2010, www.comprg.com.cn, All Rights Reserved
京ICP备14022230号-1,电话/传真:010-82561037 82561614 ,Mail:gaojian@comprg.com.cn
地址:北京市海淀区远大路20号宝蓝大厦E座704,邮编:100089