<!doctype html>
<html lang="'en">
<head>
<meta charset="UTF-8">
<title>Tab切换-自动</title>
<script src="js/jquery.js"></script>
</head>
<style>
.info-flow-nav {
overflow: hidden;
}
.info_ul {
margin: 20px auto;
list-style: none;
100%;
height: 40px;
position: relative;
background: #000;
}
.info_ul li {
float: left;
color: #fff;
line-height: 40px;
padding-left: 6px;
padding-right: 6px;
cursor: pointer;
transition: background ease .6s;
position: relative;
box-sizing: border-box;
display: inline-block;
margin-left: 40px;
}
.active {
background-color: #c00;
}
</style>
<body>
<ul id="infoflow-right-nav-ul" class="info_ul">
<li class="li_a active" data-id="180" id="0">评论数排行</li>
<li class="li_a" data-id="181" id="1">图片排行</li>
<li class="li_a" data-id="182" id="2">国内点击量</li>
<li class="li_a" data-id="183" id="3">国内评论数</li>
<li class="li_a" data-id="184" id="4">国际点击量</li>
</ul>
</body>
<script>
window, onload = function() {
var timer = null;
var num = 0;
var uls = document.getElementById('infoflow-right-nav-ul');
var lis = uls.getElementsByTagName('li')
timer = setInterval(autoplay, 3000);
for (var i = 0; i < lis.length; i++) {
lis[i].id = i
lis[i].onmouseover = function() {
clearInterval(timer);
changTab(this.id);
}
lis[i].onmouseout = function() {
timer = setInterval(autoplay, 3000);
}
}
function autoplay() {
num++;
if (num >= lis.length) {
num = 0;
}
changTab(num);
}
function changTab(curnum) {
$('.info_ul li').removeClass('active')
var lis_id = $(lis[curnum]).attr('data-id')
$(lis[curnum]).attr('class', 'active')
$.ajax({
type: 'get',
url: 'url',
dataType: 'json',
data: {
size: 10,
page: 1,
cate_id: lis_id
},
success: function(data) {
console.log(data)
}
})
num = curnum;
}
}
</script>
</html>