<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;}
#div{width: 200px;}
#div div{width: 200px;height: 200px;background: #ccc;border: 1px solid black;display:none ;}
#div .active{background: red;}
</style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
function DrameTab(option){
this.setData(option);//数据存储
this.setTopNode();//生成上面的三个点击按钮
this.setBottomNode();//生成下面的内容
/*if(this.isAuto){
if(this.isAuto.Auto==true){
this.Autoplay();
this.MouseEvent();
}
};*/
this.isAuto && ((this.isAuto.Auto==true) && (this.Autoplay(),this.MouseEvent()))//如果下面的参数有isAuto,并且值为true,就执行Autoplay,和MouseEvent函数
}
DrameTab.prototype={
"setData":function(option){//存放数据
for(var i in option){
this[i]=option[i];//循环拿到传入的参数
};
this.ele=document.getElementById(this.eleId);//获取传入的元素的id
this.topArr=[];//存储头部的元素
this.bottomArr=[];//存储下方生成的元素
if(this.isAuto){//如果参数内有isAuto,就存储下列数据
this.timer=null;//设置轮询定时器
this.setTime=this.isAuto.AutoTime?this.isAuto.AutoTime:1000;//获取传入的轮询时间，不传就默认为1000毫秒
this.index=0;//设置选项卡自动播放的次数
};
},
"setTopNode":function(){//根据传入的参数生成头部的元素
for(var i=0;i<this.tabTopName.length;i++){
this.needNode=document.createElement(this.tabTopEle);//循环生成每个要求元素
this.needNode.value=this.tabTopName[i];//循环给每个元素添加要求的内容
this.needNode.type="button";//使用的是input,因此要改成button
this.tabTopClass &&(this.needNode.className=this.tabTopClass);//判断如果有要求的class类此时添加，如果没有就不加
/*
if(this.tabTopClass){
this.needNode.className=this.tabTopClass;
}此为上句代码的传统写法
*/
this.topArr.push(this.needNode);//把生成的元素存储到数据存储的位置，便于后面使用
this.ele.appendChild(this.needNode);//把生成的元素添加到主元素内
};
this.topArr[0].className+=" "+this.tabActiveClass;//给元素添加选中时的颜色
},
"setBottomNode":function(){//生成下方的元素，与生成上方的元素基本一致，仅仅多了一个隐藏元素
for(var i=0;i<this.tabBottomName.length;i++){
this.needNode=document.createElement(this.bottomEle);
this.needNode.innerHTML=this.tabBottomName[i];
this.tabBottomClass &&(this.needNode.className=this.tabBottomClass);
this.bottomArr.push(this.needNode);
this.ele.appendChild(this.needNode);
};
this.bottomArr[0].style.display="block";
},
"startGo":function(){//点击选项卡切换内容和样式的事件
var _this=this;//点击事件会改变this的指向，这里要预先存储this
for (var i=0;i<this.topArr.length;i++){//循环给每个元素添加一个点击事件
this.topArr[i].index=i;//给循环出的每个元素一个下标
this.topArr[i].onclick=function(){//当每个元素点击时
for(var j=0;j<_this.topArr.length;j++){//给所有的元素进行一下操作
_this.topArr[j].className="";//先清空所有的元素的class
_this.bottomArr[j].style.display="none";//让所有的下方的元素都隐藏
_this.tabTopClass && (_this.topArr[j].className=_this.tabTopClass)//如果有默认的class就在这里添加
}
this.className+=" "+_this.tabActiveClass;//被选中元素添加元素被选中时的式样的类
_this.bottomArr[this.index].style.display="block";//被选中的元素显示
}
}
},
"Autoplay":function(){//自动播放选项卡的函数方法
var _this=this;//定时器会改变this的指向，这里要预存this
clearInterval(this.timer);//使用定时器前先清空定时器
this.timer=setInterval(function(){
_this.index++;//***定时器里的this指向的是window，因此治理使用预先存储的_this;
if(_this.index==_this.topArr.length)_this.index=0;//如果自动播放的次数大于所要求的元素的个数时，index恢复到0
for(var i=0;i<_this.topArr.length;i++){//以下轮询定时器所执行的内容基本与手动时操作一致
_this.topArr[i].className="";
_this.tabTopClass &&(_this.topArr[i].className=_this.tabTopClass);
_this.bottomArr[i].style.display='none';
}
_this.topArr[_this.index].className+=" "+_this.tabActiveClass;
_this.bottomArr[_this.index].style.display="block";
},this.setTime)
},
"MouseEvent":function(){//当鼠标移入选项卡后停止播放，和鼠标移出自动播放的函数
var _this=this;//事件改变this指向，此处预先存储
this.ele.onmouseover=function(){//鼠标移入，停止轮询
clearInterval(_this.timer);
};
this.ele.onmouseout=function(){//鼠标移出，开始轮询
_this.Autoplay();
}
}
}
new DrameTab({
"eleId":"div",
"tabTopName":[1,2,3],
"tabActiveClass":"active",
"tabTopClass":"leoTop",
"tabTopEle":"input",
"tabBottomName":["leo1111111","sky2222222","busy3333333"],
"bottomEle":"div",
"tabBottomClass":"bottomLeo",
"isAuto":{
"Auto":true,
"AutoTime":500
}
}).startGo();
</script>
</body>
</html> 0
点赞
收藏
分享
选项卡封装（带自动播放功能）（李游精品前端课程笔记）
相关推荐
0 条评论
