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

[html] 
<div class="sub_box"> 
                       <div id="p-select" class="sub_nav"> 
                           <div class="sub_no" id="bd1lfsj"> 
                               <ul> 
                                   <li class="show">1</li> 
                                   <li class="">2</li> 
                                   <li class="">3</li> 
                                   <li class="">4</li> 
                                   <li class="">5</li> 
                                   <li class="">6</li> 
                                   <li class="">7</li> 
                               </ul> 
                           </div> 
                       </div> 
                       <div id="bd1lfimg"> 
                           <div> 
                               <dl class="show"> 
                               </dl> 
                               <asp:Repeater ID="repTopPicture" runat="server"> 
                                   <ItemTemplate> 
                                       <dl class=""> 
                                           <dt><a href=""> 
                                               <img src='<%#Eval("ImageUrl")%>' /></a></dt> 
                                       </dl> 
                                   </ItemTemplate> 
                               </asp:Repeater> 
                           </div> 
                       </div> 
                   </div> 
                   <script type="text/javascript">                        movec();</script> 
 <div class="sub_box">
                        <div id="p-select" class="sub_nav">
                            <div class="sub_no" id="bd1lfsj">
                                <ul>
                                    <li class="show">1</li>
                                    <li class="">2</li>
                                    <li class="">3</li>
                                    <li class="">4</li>
                                    <li class="">5</li>
                                    <li class="">6</li>
                                    <li class="">7</li>
                                </ul>
                            </div>
                        </div>
                        <div id="bd1lfimg">
                            <div>
                                <dl class="show">
                                </dl>
                                <asp:Repeater ID="repTopPicture" runat="server">
                                    <ItemTemplate>
                                        <dl class="">
                                            <dt><a href="">
                                                <img src='<%#Eval("ImageUrl")%>' /></a></dt>
                                        </dl>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">                        movec();</script>javascript代码:

[javascript] 
//选择器  
function $a(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}} 
 
//焦点滚动图 点击移动  
function movec() 

    var o=$a("bd1lfimg",""); 
    var oli=$a("bd1lfimg","dl"); 
    var oliw=oli[0].offsetWidth; //每次移动的宽度     
    var ow=o.offsetWidth-2; 
    var dnow=0; //当前位置    
    var olf=oliw-(ow-oliw+10)/2; 
        o["scrollLeft"]=olf+(dnow*oliw); 
    var rqbd=$a("bd1lfsj","ul")[0]; 
    var extime; 
 
    <!--for(var i=1;i<oli.length;i++){rqbd.innerHTML+="<li>"+i+"</li>";}--> 
    var rq=$a("bd1lfsj","li"); 
    for(var i=0;i<rq.length;i++){reg(i);}; 
    oli[dnow].className=rq[dnow].className="show"; 
    var wwww=setInterval(uu,2000); 
 
    function reg(i){rq[i].onclick=function(){oli[dnow].className=rq[dnow].className="";dnow=i;oli[dnow].className=rq[dnow].className="show";mv();}} 
    function mv(){clearInterval(extime);clearInterval(wwww);extime=setInterval(bc,15);wwww=setInterval(uu,8000);} 
    function bc() 
    { 
        var ns=((dnow*oliw+olf)-o["scrollLeft"]); 
        var v=ns>0?Math.ceil(ns/10):Math.floor(ns/10); 
        o["scrollLeft"]+=v;if(v==0){clearInterval(extime);oli[dnow].className=rq[dnow].className="show";v=null;} 
    } 
    function uu() 
    { 
        if(dnow<oli.length-2) 
        { 
            oli[dnow].className=rq[dnow].className=""; 
            dnow++; 
            oli[dnow].className=rq[dnow].className="show"; 
        } 
        else{oli[dnow].className=rq[dnow].className="";dnow=0;oli[dnow].className=rq[dnow].className="show";} 
        mv(); 
    } 
    o.onmouseover=function(){clearInterval(wwww);} 
    o.onmouseout=function(){extime=setInterval(bc,15);wwww=setInterval(uu,8000);} 

//选择器
function $a(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}

//焦点滚动图 点击移动
function movec()
{
 var o=$a("bd1lfimg","");
 var oli=$a("bd1lfimg","dl");
    var oliw=oli[0].offsetWidth; //每次移动的宽度 
 var ow=o.offsetWidth-2;
 var dnow=0; //当前位置 
 var olf=oliw-(ow-oliw+10)/2;
  o["scrollLeft"]=olf+(dnow*oliw);
 var rqbd=$a("bd1lfsj","ul")[0];
 var extime;

 <!--for(var i=1;i<oli.length;i++){rqbd.innerHTML+="<li>"+i+"</li>";}-->
 var rq=$a("bd1lfsj","li");
 for(var i=0;i<rq.length;i++){reg(i);};
 oli[dnow].className=rq[dnow].className="show";
 var wwww=setInterval(uu,2000);

 function reg(i){rq[i].onclick=function(){oli[dnow].className=rq[dnow].className="";dnow=i;oli[dnow].className=rq[dnow].className="show";mv();}}
 function mv(){clearInterval(extime);clearInterval(wwww);extime=setInterval(bc,15);wwww=setInterval(uu,8000);}
 function bc()
 {
  var ns=((dnow*oliw+olf)-o["scrollLeft"]);
  var v=ns>0?Math.ceil(ns/10):Math.floor(ns/10);
  o["scrollLeft"]+=v;if(v==0){clearInterval(extime);oli[dnow].className=rq[dnow].className="show";v=null;}
 }
 function uu()
 {
  if(dnow<oli.length-2)
  {
   oli[dnow].className=rq[dnow].className="";
   dnow++;
   oli[dnow].className=rq[dnow].className="show";
  }
  else{oli[dnow].className=rq[dnow].className="";dnow=0;oli[dnow].className=rq[dnow].className="show";}
  mv();
 }
 o.onmouseover=function(){clearInterval(wwww);}
 o.onmouseout=function(){extime=setInterval(bc,15);wwww=setInterval(uu,8000);}
}

  推荐精品文章

·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