我的选项卡是自动滑动的,悬停时我需要 Puss 并自动运行,现在用户悬停可以停止自动滑动选项卡吗?我的 html、css 和 js 代码是: HTML 代码
<ul id='tabs'>
<li class='on'>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
<li>tab 4</li>
<li>tab 5</li>
CSS 代码
#tabs { list-style: none; margin: 0; padding: 0; }
#tabs li { float: left; background: #ddd; padding: 6px; }
#tabs li.on { background: #f90; color: #fff; }
JS(jQuery)代码
$(function() {
//cache a reference to the tabs
var tabs = $('#tabs li');
//on click to tab, turn it on, and turn previously-on tab off
tabs.click(function() { $(this).addClass('on').siblings('.on').removeClass('on'); });
//auto-rotate every 5 seconds
setInterval(function() {
//get currently-on tab
var onTab = tabs.filter('.on');
//click either next tab, if exists, else first one
var nextTab = onTab.index() < tabs.length-1 ? onTab.next() : tabs.first();
nextTab.click();
}, 5000);
});
Hove 可以在我的代码中使用clearInterval 吗?
最佳答案
此代码将在任何选项卡悬停时暂停自动滑动,并在鼠标移开时重新启动`
//cache a reference to the tabs
var tabContainer = $('#tabs');
var tabs = $('#tabs li');
//on click to tab, turn it on, and turn previously-on tab off
tabs.click(function() {
$(this).addClass('on').siblings('.on').removeClass('on');
});
//auto-rotate every 5 seconds
var slideInterval;
function initiateSlideInterval() {
slideInterval = setInterval(function() {
//get currently-on tab
var onTab = tabs.filter('.on');
//click either next tab, if exists, else first one
var nextTab = onTab.index() < tabs.length - 1 ? onTab.next() : tabs.first();
nextTab.click();
}, 5000);
}
initiateSlideInterval();
tabContainer.mouseover(function() {
clearInterval(slideInterval)
});
tabContainer.mouseout(function() {
initiateSlideInterval();
});`
关于javascript - 停止用户悬停中自动滑动选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41416207/