jQuery

Question

提供fiddle的功能：https://jsfiddle.net/qpguk0xf/

来自 link 的列表 class "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 属性）并隐藏另一个，之后我为它设置了一个间隔来触发点击事件一次在每个 link 上，整个函数是：

$(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);
        });

});

我知道代码确实很乱，但它确实有效。但是，我的问题是什么？当用户实际单击列表的 link 时，它会准确显示它需要的方式，但是当用户离开滑块区域并且计时器再次启动时（悬停它时，时间停止然后重新开始) 间隔的 "index" 从它停止的地方开始，换句话说：如果函数索引在“2”并且用户在计时器重新开始时单击 "link 1"，它将不会从用户单击的地方继续，它将在停止的地方继续，所以它不会转到“ 2" 应该是，但到 "3"。

有没有办法在用户每次点击 link 时从 "index" 开始计数？

Answer 1

您可以先将index设置为0，然后调用clickTo()显示第一篇文章。那么当一篇文章被点击的时候，可以使用.index()方法得到被点击的link在link的集合中的索引。

这是我认为您可以拥有的：

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

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

jQuery - A "slider" or "carousel" in the list links but

list

slider

hyperlink

carousel