ユーザーの自動スライドタブを停止するHover

Question

マイタブが自動的にスライドしていて、マウスを動かして自動で実行するとユーザーがホバーを離れることができます。私のHTMLとCSSやJSコード、これは次のとおりです。 HTML CODE

<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の）CODE

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

ホーブはでてclearIntervalを使用することができます私のコード？

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