<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自动播放选项卡</title>
<style>
* {
margin: 0;
padding: 0;
}
#box,#box2,#box3,#box4 {
500px;
height: 400px;
border: 1px solid #000;
border-radius: 8px;
text-align: center;
padding-top: 10px;
margin: 30px;
float: left;
}
a {
text-decoration: none;
font-size: 40px;
}
.inp input {
100px;
height: 40px;
font-size: 18px;
font-weight: bold;
outline: none;
background: #ccc;
}
.inp .active {
100px;
height: 40px;
font-size: 18px;
font-weight: bold;
outline: none;
background: #f50;
}
.body div {
450px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 100px;
font-weight: bold;
margin: 0 auto;
background: #f90;
border-radius: 8px;
margin-top: 30px;
display: none;
}
.body div.show {
display: block;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(function () {
function likTabAuto(oBoxId){
var oBox = $('#'+oBoxId);
var aBtn = oBox.find('.inp input');
var aDiv = oBox.find('.body div');
var iNow = 0;
var timer = null;
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].index = i;
aBtn[i].onclick = function() {
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].className = '';
aDiv[i].className = '';
}
iNow = this.index;
this.className = 'active';
aDiv[this.index].className = 'show';
}
}
function tab() {
for(var i = 0; i < aBtn.length; i++) {
aBtn[i].className = '';
aDiv[i].className = '';
}
aBtn[iNow].className = 'active';
aDiv[iNow].className = 'show';
}
function next() {
iNow++;
if(iNow == aBtn.length) {
iNow = 0;
}
tab();
}
timer = setInterval(next, 1000);
oBox.hover(function () {
clearInterval(timer);
}, function () {
timer = setInterval(next, 1000);
});
}
likTabAuto('box');
likTabAuto('box2');
likTabAuto('box3');
likTabAuto('box4');
});
</script>
</head>
<body>
<div id="box">
<div class="inp">
<input type="button" value="你好" class="active" />
<input type="button" value="再见" />
<input type="button" value="不送" />
</div>
<div class="body">
<div class="show">你好</div>
<div>再见</div>
<div>不送</div>
</div>
</div>
<div id="box2">
<div class="inp">
<input type="button" value="你好" class="active" />
<input type="button" value="再见" />
<input type="button" value="不送" />
</div>
<div class="body">
<div class="show">你好</div>
<div>再见</div>
<div>不送</div>
</div>
</div>
<div id="box3">
<div class="inp">
<input type="button" value="你好" class="active" />
<input type="button" value="再见" />
<input type="button" value="不送" />
</div>
<div class="body">
<div class="show">你好</div>
<div>再见</div>
<div>不送</div>
</div>
</div>
<div id="box4">
<div class="inp">
<input type="button" value="你好" class="active" />
<input type="button" value="再见" />
<input type="button" value="不送" />
</div>
<div class="body">
<div class="show">你好</div>
<div>再见</div>
<div>不送</div>
</div>
</div>
</body>
</html>