2017-01-01 30 views
0

我的標籤是自動滑動,我需要貓時懸停和運行自動離開用戶現在懸停可以停止用戶懸停自動滑動選項卡?我的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在我的代碼?

+1

你能花一點時間和[編輯]你的問題?我已經讀了幾次,並且我真的不知道你想要解決什麼問題;例如,什麼是「* Puss *」?如果您暫時關閉問題並請一位朋友或同事加深對英語的理解,來回顧這個問題,那麼您可以用您的母語充分解釋並對翻譯有反饋意見,這可能會有所幫助。雖然不是母語爲英語的人不是解決問題的理由,但如果我們不明白你問的是什麼,那麼真正的機會就會結束這個問題。 –

+0

@大衛托馬斯貓是停止onmousever我的代碼自動滑動無需停止onmosever或用戶懸停 – stackUser

回答

0

此代碼將暫停對任一標籤懸停自動幻燈片,並重新啓動,當鼠標移動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(); 
});`