JavaScript版可控制切换的图片轮换特效

发布时间：2018-08-24 20:28:51 所属栏目：Asp教程来源：站长网

导读：Java Script版可控制的图片切换，设计精美，四张图片轮播，用了5张背景图，简洁大方。使用说明： addTab(标签栏ID,标签栏子的标签tagname,左右按钮是否在标签栏中并在两侧,标签栏选中时的className,内容栏ID,内容栏子的标签tagname,左右按钮是否在内容栏

　　JavaScript版可控制的图片切换，设计精美，四张图片轮播，用了5张背景图，简洁大方。

　　使用说明：

　　addTab("标签栏ID","标签栏子的标签tagname",左右按钮是否在标签栏中并在两侧,"标签栏选中时的className","内容栏ID","内容栏子的标签tagname",左右按钮是否在内容栏中并在两侧,"内容栏选中时的className","向左按钮的ID","向右按钮的ID");

　　左右按钮在tab容器外的代码和效果：

　　addTab("nav2","li",false,"hover","con2","li",false,"show","left2","right2");

　　代码演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>可控制切换的图片幻灯切换效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> *{margin:0;padding:0;} ul,ol{list-style-type:none;} .tab{width:400px;height:300px;margin:0 auto;border:1px solid #999;position:relative;} #con2{width:400px;height:300px;overflow:hidden;} #con2 li{display:none;} #con2 li img{width:400px;height:300px;} #con2 li.show{display:block;} .navps{width:100%;height:25px;padding-top:7px;position:absolute;left:0;bottom:0;z-index:1;background:white;border-top:1px solid #666;opacity:0.8;filter:alpha(opacity=80);-moz-user-select:none;} #nav2{float:left;} #nav2 li{width:16px;height:16px;float:left;line-height:16px;text-align:center;font-size:12px;font-family:Tahoma,sans-serif;font-weight:bold;margin-left:10px;cursor:pointer;} #nav2 li.hover{background:url(http://www.veryhuo.com/uploads/allimg/1011/bg.png) 0 0 no-repeat;color:#fff;} #left2,#right2{width:16px;height:16px;float:left;margin-left:20px;display:inline;background:url(http://www.veryhuo.com/uploads/allimg/1011/bgl.png) 0 0 no-repeat;} #right2{background:url(http://www.veryhuo.com/uploads/allimg/1011/bgr.png) 0 0 no-repeat;} #left2.showp{background-image:url(http://www.veryhuo.com/uploads/allimg/1011/bglh.png);} #right2.showp{background-image:url(http://www.veryhuo.com/uploads/allimg/1011/bgrh.png);} </style> <script language="javascript"> //代码示例： //addTab("标签栏ID","标签栏子的标签tagname",左右按钮是否在标签栏中并在两侧,"标签栏选中时的className","内容栏ID","内容栏子的标签tagname",左右按钮是否在内容栏中并在两侧,"内容栏选中时的className","向左按钮的ID","向右按钮的ID"); //左右按钮在tab容器外的代码和效果： //addTab("nav2","li",false,"hover","con2","li",false,"show","left2","right2"); function $(id){return typeof id=="string"?document.getElementById(id):id;} function $$(id,tagname){return typeof id=="string"?document.getElementById(id).getElementsByTagName(tagname):id.getElementsByTagName(tagname);} //构造函数---初始化变量 function AddTab(idNav,idCon,idLeft,idRight,idNavSun,idConSun){ this.idNav=$(idNav); this.idCon=$(idCon); this.idLeft=$(idLeft); this.idRight=$(idRight); this.navLiList=$$(idNav,idNavSun); this.conLiList=$$(idCon,idConSun); this.navLength=$$(idNav,idNavSun).length; this.conLength=$$(idNav,idConSun).length; } //构造函数---初始化方法 AddTab.prototype={ constructor : AddTab, addHd : function(oT,sT,fN){ if (oT.addEventListener){ oT.addEventListener(sT,fN,false); } else { oT["on"+sT]=fN; } },//事件监听器 classTab : function(e,nowFocus,leftOrR){ if (typeof nowFocus=="number") { if (leftOrR=="left") { for (i=0;i<this.navLength ;i++ ) { if (nowFocus==0){nowFocus=4;} this.navLiList[i].className=i==nowFocus-1?"hover":""; this.conLiList[i].className=i==nowFocus-1?"show":""; } } else if (leftOrR=="right"){ for (i=0;i<this.navLength ;i++ ) { if (nowFocus==this.navLength-1){nowFocus=-1;} this.navLiList[i].className=i==nowFocus+1?"hover":""; this.conLiList[i].className=i==nowFocus+1?"show":""; } } } else { for (i=0;i<this.navLength ;i++ ) { this.navLiList[i].className=this.navLiList[i]==e?"hover":""; this.conLiList[i].className=this.navLiList[i]==e?"show":""; } } },//切换class addHdEach : function(){ var oTa=this; for (i=0;i<this.navLength ;i++ ) { oTa.addHd(oTa.navLiList[i],"mouseover",function(){oTa.classTab(this);}) } oTa.addHd(oTa.idLeft,"click",function(){ var nowFocus=oTa.nowFocus(); oTa.classTab("",nowFocus,"left") }); oTa.addHd(oTa.idRight,"click",function(){ var nowFocus=oTa.nowFocus(); oTa.classTab("",nowFocus,"right") }); oTa.addHd(oTa.idLeft,"mousedown",function(){ this.className="showp"; }); oTa.addHd(oTa.idLeft,"mouseup",function(){ this.className=""; }); oTa.addHd(oTa.idRight,"mousedown",function(){ this.className="showp"; }); oTa.addHd(oTa.idRight,"mouseup",function(){ this.className=""; }); oTa.idNav.onselectstart=function(){return false;}; oTa.idLeft.onselectstart=function(){return false;}; oTa.idRight.onselectstart=function(){return false;}; },//为每个对象增加事件监听 nowFocus : function(){ for (i=0;i<this.navLength ;i++ ) { if (this.navLiList[i].className=="hover") return i; } }//返回当前聚焦元素的下标 } window.onload=function(){ var person1 = new AddTab("nav2","con2","left2","right2","li","li"); person1.addHdEach();//为新标签触发绑定事件。 } </script> </head> <body> <div class="tab"> <ol ID="con2"> <li class="show"><img src="http://www.veryhuo.com/uploads/common/images/p1.jpg"></li> <li><img src="http://www.veryhuo.com/uploads/common/images/p2.jpg"></li> <li><img src="http://www.veryhuo.com/uploads/common/images/p3.jpg"></li> <li><img src="http://www.veryhuo.com/uploads/common/images/p4.jpg"></li> </ol> <div class="navps"> <a id="left2"></a> <ul ID="nav2"> <li class="hover">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <a id="right2"></a> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：东莞站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

每个asp程序员必懂的知	电话号码变成图片的AS
ASP辨别搜索引擎蜘蛛的	浅谈ASP.NET的Postbac