首页 > 代码库 > 用js同时封装两个函数，任意调用不同格式选项卡
用js同时封装两个函数，任意调用不同格式选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
.tab{
width: 500px;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.tab ul{
width: 1500px;
transition: 1s;
}
.tab ul li{
width: 500px;
height: 300px;
float: left;
}
.tab ul li a img{
width: 500px;
height: 300px;
}
.tab ol{
width:100px;
height:30px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -50px;
}
.tab ol li{
width: 30px;
height: 30px;
border-radius: 50%;
background: #ccc;
text-align: center;
line-height: 30px;
color: white;
float: left;
}
.tab ol li:nth-child(2){
margin: 0 5px;
}
#tab2{
margin: 100px auto;
}
</style>
</head>
<body>
<div class="tab" id="tab1">
<ul>
<li>
<a href="http://www.mamicode.com/#">
<img src="http://img30.360buyimg.com/da/jfs/t3010/117/1247129827/102990/6ec92bc2/57bff0bbNd1783dfb.jpg" >
</a>
</li>
<li>
<a href="http://www.mamicode.com/#">
<img src="http://img12.360buyimg.com/da/jfs/t3238/307/803476145/91935/92abfeb6/57bfb9a5N61f5f9c6.jpg" >
</a>
</li>
<li>
<a href="http://www.mamicode.com/#">
<img src="http://img14.360buyimg.com/da/jfs/t3121/2/810787436/77310/8ee6536b/57bfb9dfN0089bba2.jpg" >
</a>
</li>
</ul>
<ol>
<li style="background:red">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<div class="tab" id="tab2">
<ul>
<li>
<a href="http://www.mamicode.com/#">
<img src="http://img30.360buyimg.com/da/jfs/t3010/117/1247129827/102990/6ec92bc2/57bff0bbNd1783dfb.jpg" >
</a>
</li>
<li>
<a href="http://www.mamicode.com/#">
<img src="http://img12.360buyimg.com/da/jfs/t3238/307/803476145/91935/92abfeb6/57bfb9a5N61f5f9c6.jpg" >
</a>
</li>
<li>
<a href="http://www.mamicode.com/#">
<img src="http://img14.360buyimg.com/da/jfs/t3121/2/810787436/77310/8ee6536b/57bfb9dfN0089bba2.jpg" >
</a>
</li>
</ul>
<ol>
<li style="background:red">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
</body>
<script>
function $(x){
return document.querySelector(x);
}
function $s(x){
return document.querySelectorAll(x);
}
function tab(id,type){
if(type=="动画1"){
var btns=$s(id+" ol li");
var pics=$s(id+" ul li");
var picbox=$(id+" ul");
var btnsbox=$(id+" ol");
var length=btns.length;
picbox.style.position="relative";
for(i=0;i<length;i++){
btns[i].index=i;
pics[i].style.position="absolute";
pics[i].style.transition = "1.5s";
pics[i].style.top="0";
pics[i].style.left="0";
btns[i].onclick=function(){
for(i=0;i<length;i++){
btns[i].style.backgroundColor="";
pics[i].style.opacity= 0;
}
btns[this.index].style.backgroundColor="red";
pics[this.index].style.opacity= 1;
}
}
}
else if(type=="动画2") {
var btns=$s(id+" ol li");
var picbox=$(id+" ul");
var length=btns.length;
for(i=0;i<length;i++){
btns[i].index=i;
btns[i].onclick=function(){
for(i=0;i<length;i++){
btns[i].style.backgroundColor="";
}
picbox.style.marginLeft=-500*this.index+"px";
btns[this.index].style.backgroundColor="red";
}
}
}
}
tab("#tab1","动画1")
tab("#tab2","动画2");
</script>
</html>
用js同时封装两个函数，任意调用不同格式选项卡