我已经注册了,但很抱歉这么简单的问题!
我希望标签每5秒自动切换一次,例如,如何实现它?
我的代码:
HTML代码:
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">first</a></li>
<li><a href="#tab2">second</a></li>
<li><a href="#tab3">third</a></li>
<li><a href="#tab4">fourth</a></li>
<li><a href="#tab5">fifth</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<img src="first.jpg" alt="" />
</div>
<div id="tab2" class="tab">
<img src="second.jpg" alt="" />
</div>
<div id="tab3" class="tab">
<img src="third.jpg" alt="" />
</div>
<div id="tab4" class="tab">
<img src="fourth.jpg" alt="" />
</div>
<div id="tab5" class="tab">
<img src="fifth.jpg" alt="" />
</div>
</div>
</div>
js code:
$('.tabs .tab-links a').on('click', function(e) {
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
提前感谢!
答案 0 :(得分:0)
也许是这样的:
var current_tab = 1;
var number_of_tabs = 5;
window.setInterval(function(){
if(current_tab == number_of_tabs){
current_tab = 1;
}else{
current_tab++;
}
$('#tab'+current_tab).show().siblings().hide();
$('#tab'+current_tab).parent('li').addClass('active').siblings().removeClass('active');
}, 5000);