在用户悬停时停止自动滑动选项卡答案

【问题标题】：Stop automatic slide tab in the user Hover在用户悬停时停止自动滑动选项卡
【发布时间】：2017-05-15 22:24:24
【问题描述】：

我的标签是自动滑动的，当悬停和运行时我需要 Puss 让用户自动悬停现在 hove 可以停止用户悬停中的自动滑动标签吗？我的 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 吗？

【问题讨论】：

你能花点时间edit你的问题吗？我已经读了几次，老实说，我不知道您要解决什么问题；例如，什么是“Puss”？如果您暂时关闭问题并请对英语有更好理解的朋友或同事来复习该问题，这样您就可以用您的母语充分解释并获得对翻译的反馈，这可能会有所帮助。虽然不是以英语为母语的人不是结束问题的理由，但如果我们无法理解您的问题，那么问题很有可能会被结束。
@David Thomas puss is stop onmosever 我的代码会自动滑动而不停止 onmosever 或用户悬停

标签： javascript jquery tabs hover slide

【解决方案1】：

此代码将在任何选项卡悬停时暂停自动滑动，并在鼠标移开时重新启动`

//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();
});`

【讨论】：