带自动的选项卡

html部分

<div class="navWrap">
<div class="nav clearfix">
<a class="active" href="javascript:;">赚钱</a>
<a href="javascript:;">经典</a>
<a href="javascript:;">省时</a>
<a class="navA4" href="javascript:;">耐玩</a>
</div>
<div class="contWrap">
<div class="cont block">
<img src="images/navCont1.jpg" alt="">
</div>
<div class="cont">
<img src="images/navCont2.jpg" alt="">
</div>
<div class="cont">
<img src="images/navCont3.jpg" alt="">
</div>
<div class="cont">
<img src="images/navCont4.jpg" alt="">
</div>
</div>
</div>

js部分

/*nav选项卡切换带自动*/
var timer=null;
var index=1;
$(".nav a").each(function(i){
$(this).mouseover(function(){
$(this).addClass('active').siblings().removeClass('active');
$(".contWrap .cont").eq(i).show().siblings(".contWrap .cont").hide();
index=i+1;
});
})
$(".navWrap").mouseover(function(){
window.clearInterval(timer);
});
$(".navWrap").mouseleave(function(){
auto();
});
function auto(){
window.clearInterval(timer);
timer=setInterval(function(){
index++;
if(index>4){
index=1;
}
$(".nav a").eq(index-1).addClass('active').siblings().removeClass('active');
$(".contWrap .cont").eq(index-1).show().siblings(".contWrap .cont").hide();
},3000);
}
auto();

 注:定时器一定要记得清空

日常所遇,随手而记。
原文地址:https://www.cnblogs.com/zhihou/p/6537558.html