jQuery的 - 一個「滑」或「旋轉木馬」列表中的鏈接，但

Question

提供了功能的小提琴：https://jsfiddle.net/qpguk0xf/

從鏈接類「其他」的名單：

<div class="others"> 
<ul> 
<li class="active"><a href="path-to-article" data-article="art-1">Article 1</a></li> 
<li><a href="path-to-article" data-article="art-2">Article 2</a></li> 
<li><a href="path-to-article" data-article="art-3">Article 3</a></li> 
</ul> 
</div> 

我做了一個腳本當你點擊它時，會顯示相應的文章（它的ID等於data-article屬性）並隱藏另一篇文章，之後我會在一段時間內爲每個鏈接觸發點擊事件，整個功能是：

$(function() { 
    $('.others a[data-article]').click(function (e) { 
    e.preventDefault(); 
    var $article = $(this).data('article'), 
     $carouselIT = $('#' + $article); 

      $('.others').find('li').removeClass('active'); 
      $(this).parent('li').addClass('active'); 

       $('.carouselbg').each(function() { 
        $(this).fadeOut('fast'); 
       }); 

       $carouselIT.fadeIn('slow'); 
     }); 

     var elements = $('.others').find('a[data-article]'); 
     var index = 1; 

     elements.eq(0).trigger('click'); // just to show the first item 

     var interval = setInterval(clickTo, 6000); 

     function clickTo() { 
      elements.eq(index).trigger("click"); 
      index++; 
      if(index == elements.size()){ 
      index = 0; 
      } 
     }; 

     $('#carousel').hover(function(ev){ 
      clearTimeout(interval); 
     }, function(ev){ 
      interval = setInterval(clickTo, 6000); 
     }); 

}); 

我知道代碼真的搞砸了，但它確實有效。但是，我的問題是什麼？ 當用戶實際上點擊列表中的一個鏈接時，它確切地顯示了它需要的方式，但是當用戶離開滑塊的區域並且定時器再次啓動（當將其懸停時，時間停止然後重新開始）換句話說： 如果功能索引在「2」中並且用戶在定時器重新啓動時點擊「鏈接1」，它將不會從用戶點擊的地方繼續，將繼續停在那裏，所以它不會像它應該的那樣去「2」，而是去「3」。

有沒有辦法每次用戶點擊鏈接「索引」開始從它開始計數？

Answer 1

您可以最初將index設置爲0並呼叫clickTo()顯示第一篇文章。然後，當點擊一篇文章時，您可以使用.index()方法獲取鏈接集中點擊鏈接的索引。

以下是我認爲你可以有：

$(function() { 
    var $links = $('.others a[data-article]'); 
    var index = 0; 

    $links.click(function (e) { 
     e.preventDefault(); 
     var $link = $(this); 
      $article = $link.data('article'), 
      $carouselIT = $('#' + $article); 

     $('.others').find('li').removeClass('active'); 
     $link.parent('li').addClass('active'); 

     $('.carouselbg').fadeOut('fast'); 

     $carouselIT.fadeIn('slow'); 

     index = ($links.index($link) + 1) % $links.length; 
    }); 

    clickTo(); // just to show the first item 

    var interval = setInterval(clickTo, 6000); 

    function clickTo() { 
     $links.eq(index).trigger("click"); 
    }; 

    $('#carousel').hover(function (ev) { 
     clearTimeout(interval); 
    }, function (ev) { 
     interval = setInterval(clickTo, 6000); 
    }); 
}); 

jsfiddle

通知我改變elements.size()到$links.length因爲.size()方法已被否決。我也刪除了使用.each()來淡化這些文章，因爲這是不必要的。