Posted in Javascript onJune 24, 2013
前台代码:
<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);} }
javascript实现焦点滚动图效果 具体方法
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@