旋轉面板和標籤

Question

我有一些div的文本和一些標籤對應。我已經能夠讓div循環，並讓選項卡循環使用。但是，我很想騎車停下來懸停，並且我需要在點擊標籤鏈接時顯示div。

小提琴：http://jsfiddle.net/eFjnU/288/

<ul> 
    <li id="tab-1" class="active"><a href="#content1">Tab 1</a></li> 
    <li id="tab-2"><a href="#content2">Tab 2</a></li> 
    <li id="tab-3"><a href="#content3">Tab 3</a></li> 
    <li id="tab-4"><a href="#content4">Tab 4</a></li> 
    <li id="tab-5"><a href="#content5">Tab 5</a></li> 
    <li id="tab-6"><a href="#content6">Tab 6</a></li> 
    <li id="tab-7"><a href="#content7">Tab 7</a></li> 
</ul> 

<div id="content-1">Sample text 1</div> 
<div id="content-2">Sample text 2</div> 
<div id="content-3">Sample text 3</div> 
<div id="content-4">Sample text 4</div> 
<div id="content-5">Sample text 5</div> 
<div id="content-6">Sample text 6</div> 
<div id="content-7">Sample text 7</div> 

的Javascript：

var divs = $('div[id^="content-"]').hide(), 
i = 0; 
tabs = $('li[id^="tab-"]'); 

(function cycle() { 

divs.eq(i).fadeIn(400) 
      .delay(4000) 
      .fadeOut(400, cycle); 

tabs.eq(i).addClass("active").siblings(".active").removeClass("active");  

i = ++i % divs.length; 

})(); 

任何幫助，將不勝感激。

Answer 1

，你可以這樣做：

var divs = $('div[id^="content-"]').hide(), 
i = 0; 
tabs = $('li[id^="tab-"]'); 

var over=false; 
var time; 
tabs.mouseenter(function(){ 
    over=true; 
}).mouseleave(function(){ 
    over=false; 
    window.clearTimeout(time); 
    cycle(); 
}).click(function(){ 
    over=true; 
    var e=$(this); 
    i=e.index(); 
    divs.eq($(".active").index()).fadeOut(400,function(){ 
     var ele=divs.eq(i);  
     tabs.removeClass("active").eq(i).addClass("active"); 
     ele.fadeIn(400); 
    }); 
}); 

function cycle() { 
    var ele=divs.eq(i);  
    tabs.eq(i).addClass("active").siblings(".active").removeClass("active"); 
    ele.fadeIn(400,function(){ 
     time=window.setTimeout(function(){ 
      if(!over){ 
       ele.fadeOut(400,function(){ 
        i = ++i % divs.length; 
        cycle(); 
       }); 
      } 
     },4000); 
    }); 
} 
cycle();  

http://jsfiddle.net/mGgaA/1/