Heim > Web-Frontend > js-Tutorial > javascript实现焦点滚动图效果 具体方法_javascript技巧

javascript实现焦点滚动图效果 具体方法_javascript技巧

WBOY
Freigeben: 2016-05-16 17:31:25
Original
1383 Leute haben es durchsucht

javascript实现焦点滚动图效果 具体方法_javascript技巧

前台代码:

复制代码 代码如下:

 
                        
                      
 
                          
 
                              
 
                              
 
                                
                                    
                                      
 
                                          
 
                                               javascript实现焦点滚动图效果 具体方法_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; 

     
    var rq=$a("bd1lfsj","li"); 
    for(var i=0;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[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);} 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage