javascript - 旋转面板和标签

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/