javascript实现焦点滚动图效果 具体方法
2013-06-24 00:00
721 查看
前台代码:
<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实现焦点滚动图效果 具体方法
- javascript实现焦点滚动图效果
- javascript实现焦点滚动图效果
- javascript实现焦点滚动图效果
- 使用JavaScript实现连续滚动字幕效果的方法
- JavaScript实现滚动栏效果的方法
- 使用JavaScript实现连续滚动字幕效果的方法
- JavaScript实现滚动栏效果的方法
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
- JavaScript实现为input与textarea自定义hover,focus效果的方法
- javascript实现下班倒计时效果的方法(可桌面通知)
- javascript 实现滚动效果 整理
- javascript实现鼠标移到Image上方时显示文字效果的方法
- javascript实现状态栏文字首尾相接循环滚动的方法
- javascript实现列表滚动的方法
- JavaScript实现走马灯效果[无缝连接、循环滚动] 向下
- javascript中实现拖拽drag & drop效果的几种方法
- Jquery 类网页微信二维码图块滚动效果具体实现
- 纯JavaScript实现全屏滚动效果
- 不通过JavaScript实现的自动滚动视差效果