码迷,mamicode.com
首页 > Web开发 > 详细

带标题和描述的JS幻灯片特效

时间:2015-04-07 19:19:09      阅读:159      评论:0      收藏:0      [点我收藏+]

标签:

<script  type="text/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(extime);clearInterval(wwww);}
    o.onmouseout=function(){extime=setInterval(bc,15);wwww=setInterval(uu,8000);}
}

</script>

 

带标题和描述的JS幻灯片特效

标签:

原文地址:http://www.cnblogs.com/fenle/p/4399070.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!