相思资源网 Design By www.200059.com

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

前台代码:

复制代码 代码如下:
<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代码:

复制代码 代码如下:
//选择器  
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);} 

标签:
焦点,滚动图,效果

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“javascript实现焦点滚动图效果 具体方法”

暂无javascript实现焦点滚动图效果 具体方法的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?