javascript实现焦点滚动图效果
来源:互联网 发布:js天气代码大全 编辑:程序博客网 时间:2024/05/17 02:15
前台代码:
<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+css 实现滚动效果
- 焦点Banner效果滚动
- jQuery横向图片滚动焦点图实现
- 用JavaScript实现文件图片滚动效果
- 不间断连续图片滚动效果(JavaScript实现)
- 使用JavaScript实现新闻滚动效果
- javascript实现图片滚动效果代码
- javascript 实现新闻咨询图片滚动效果
- Javascript实现浏览器标题栏文字滚动效果
- Dojo JavaScript实现消息滚动出现效果
- javaScript实现全屏页面滚动效果(优化)
- 纯JavaScript实现全屏滚动效果
- javaScript实现焦点轮播图界面效果(一)
- TimedEventQueue分析
- 卡尔曼滤波器
- Modbus协议
- I and Q Spectral Analysis
- ASCII码表在线查询
- javascript实现焦点滚动图效果
- android listview改变字体的大小、颜色
- 字符串全排列算法
- 程序员修炼之路
- android获取string.xml的值
- linux下bus,device,driver三者关系
- 升级spring security到3.1
- 写一个类似printf的带有不定参数的函数
- android的Handler