原生js 封装选项卡
2018-05-15 本文已影响17人
zlf_j
要求：
- 点击，跳转到选项卡
2.自动播放
3.鼠标放上去时，停止播放
4.点击上一个下一个转化
5.封装调用函数
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box,
.box2 {
width: 300px;
height: 290px;
border: 1px solid lightgray;
margin: 100px auto;
}
ul {
width: 100%;
height: 50px;
border-bottom: 1px solid lightgray;
}
li {
width: 99px;
height: 50px;
line-height: 50px;
float: left;
list-style: none;
text-align: center;
border-right: 1px solid lightgray;
}
.select div,
.select2 div {
width: 300px;
height: 200px;
text-align: center;
line-height: 200px;
display: none;
}
.ac {
background-color: red;
color: white;
}
#prev {
margin-left: 30px;
}
#next {
float: right;
margin-right: 30px;
}
button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="ac">页卡一</li>
<li>页卡二</li>
<li style="border:none;">页卡三</li>
</ul>
<div class="select">
<div style="display: block;background:lightblue;">1</div>
<div style="background: lightpink;">2</div>
<div style="background: lightgreen;">3</div>
</div>
<button id="prev">上一个</button>
<button id="next">下一个</button>
</div>
<!--<div class="box2">
<ul>
<li class="ac">页卡一</li>
<li>页卡二</li>
<li style="border:none;">页卡三</li>
</ul>
<div class="select2">
<div style="display: block;background:lightblue;">1</div>
<div style="background: lightpink;">2</div>
<div style="background: lightgreen;">3</div>
</div>
<button id="prev">上一个</button>
<button id="next">下一个</button>
</div>-->
<script type="text/javascript">
//获取元素
var odiv = document.querySelectorAll(".select div");
var oli = document.querySelectorAll(".box li");
// var odiv2 = document.querySelectorAll(".select2 div");
// var oli2 = document.querySelectorAll(".box2 li");
function dj(a, b, c) {
//点击，跳转到选项卡
for(var i = 0; i < a.length; i++) {
a[i].index = i;
a[i].onclick = function() {
for(var i = 0; i < a.length; i++) {
a[i].className = "";
b[i].style.display = "";
}
this.className = "ac";
b[this.index].style.display = "block";
}
}
//自动播放
var ran = 0;
ID = setInterval(function() {
ran++;
if(ran == 3) {
ran = 0;
}
for(var i = 0; i < b.length; i++) {
b[i].style.display = "none";
a[i].className = "";
}
b[ran].style.display = "block";
a[ran].className = "ac";
}, c)
//鼠标放上去时，停止播放
for(var i = 0; i < b.length; i++) {
b[i].onmousemove = function() {
clearInterval(ID);
}
b[i].onmouseout = function() {
ID = setInterval(function() {
ran++;
if(ran == 3) {
ran = 0;
}
for(var i = 0; i < b.length; i++) {
b[i].style.display = "none";
a[i].className = "";
}
b[ran].style.display = "block";
a[ran].className = "ac";
}, c)
}
}
//上一个，下一个
var res = 0;
next.onclick = function() {
res++;
if(res == 3) {
res = 0;
}
for(var i = 0; i < b.length; i++) {
b[i].style.display = "none";
a[i].className = "";
}
b[res].style.display = "block";
a[res].className = "ac";
}
prev.onclick = function() {
res--;
if(res == -1) {
res = 2;
}
for(var i = 0; i < b.length; i++) {
b[i].style.display = "none";
a[i].className = "";
}
b[res].style.display = "block";
a[res].className = "ac";
}
}
dj(oli, odiv, 700);
</script>
</body>
</html>
