快捷導(dǎo)航

javascript實現(xiàn)焦點滾動圖效果具體方法

更新時間：2013年06月24日 11:54:19 作者：

以下JS代碼實現(xiàn)了焦點滾動圖的效果方法，有需要的朋友可以參考一下

前臺代碼：

<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代碼：

復(fù)制代碼代碼如下:

//選擇器   
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);}  
}  