停止用户悬停自动滑动标签

我的标签是自动滑动，我需要猫时悬停和运行自动离开用户现在悬停可以停止用户悬停自动滑动选项卡？我的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的）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在我的代码？

来源

2017-01-01 stackUser

你能花一点时间和[编辑]你的问题？我已经读了几次，并且我真的不知道你想要解决什么问题;例如，什么是“* Puss *”？如果您暂时关闭问题并请一位朋友或同事加深对英语的理解，来回顾这个问题，那么您可以用您的母语充分解释并对翻译有反馈意见，这可能会有所帮助。虽然不是母语为英语的人不是解决问题的理由，但如果我们不明白你问的是什么，那么真正的机会就会结束这个问题。 –

@大卫托马斯猫是停止onmousever我的代码自动滑动无需停止onmosever或用户悬停 – stackUser

此代码将暂停对任一标签悬停自动幻灯片，并重新启动，当鼠标移动away`

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

来源

2017-01-01 15:30:00 nmathews

停止用户悬停自动滑动标签

回答

相关问题