|
<!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(/effects/UploadFiles_7074/201011/2010112800533407.png) 0 0 no-repeat;color:#fff;}
#left2,#right2{width:16px;height:16px;float:left;margin-left:20px;display:inline;background:url(/effects/UploadFiles_7074/201011/2010112800462119.png) 0 0 no-repeat;}
#right2{background:url(/effects/UploadFiles_7074/201011/2010112800462921.png) 0 0 no-repeat;}
#left2.showp{background-image:url(/effects/UploadFiles_7074/201011/2010112800515234.png);}
#right2.showp{background-image:url(/effects/UploadFiles_7074/201011/2010112800525023.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="/effects/UploadFiles_7074/201008/2010081122582652.jpg"></li>
<li><img src="/effects/UploadFiles_7074/201008/2010081122582644.jpg"></li>
<li><img src="/effects/UploadFiles_7074/201008/2010081122582622.jpg"></li>
<li><img src="/effects/UploadFiles_7074/201008/2010081122582661.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> |
| 特效说明： |
JavaScript版可控制的图片切换，设计精美，四张图片轮播，用了5张背景图，简洁大方。使用说明：
addTab("标签栏ID","标签栏子的标签tagname",左右按钮是否在标签栏中并在两侧,"标签栏选中时的className","内容栏ID","内容栏子的标签tagname",左右按钮是否在内容栏中并在两侧,"内容栏选中时的className","向左按钮的ID","向右按钮的ID");
左右按钮在tab容器外的代码和效果：
addTab("nav2","li",false,"hover","con2","li",false,"show","left2","right2"); |
|
注册 登录
