jQuery - 列表中的"slider"或"carousel"链接，但

Question

提供函数的参数:https://jsfiddle.net/qpguk0xf/

从链接类"Others"列表中:

<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()来淡出文章，因为它是不必要的。