栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

前台代码:

复制代码 代码如下:
 
                        
                            
                              

     
                                      
  • 1
  •  
                                      
  • 2
  •  
                                      
  • 3
  •  
                                      
  • 4
  •  
                                      
  • 5
  •  
                                      
  • 6
  •  
                                      
  • 7
  •  
                                  
 
                            
                        
                        
                            
                              
 
                              
 
                                
                                    
                                      
 
                                          
 
                                               ' />
 
                                      
 
                                  
 
                                
                            
                        
                    
                    

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/111092.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号