jquery - setTimeout控件

我是jquery的新手，我想知道制作类似于幻灯片的最佳方法是在一段时间后自动更改图片和图片按钮的状态。在某人单击任何图像按钮之前，自动图像更改将停止（一段时间后，如果用户一段时间不按任何按钮，则该操作可能会继续）。

$(document).ready(function () {
    function pradinis() {
        setTimeout(doSomething, 4500);
        setTimeout(doSomethingElse, 1500);
        setTimeout(doSomethingUsefulThisTime, 3000);
    }

    function kartojas() {
        setTimeout(doSomething, 4500);
        setTimeout(doSomethingElse, 1500);
        setTimeout(doSomethingUsefulThisTime, 3000);
    }
    var refreshIntervalId = setInterval(kartojas, 5000);
    pradinis();

    $('.item1,.item2,.item3').mouseenter(function () {
        clearInterval(refreshIntervalId);
    });
    $('.item1').click(function () {
        $(".char1").fadeIn("slow");
        $("char1").addClass('active');
        $(".char3,.char2").fadeOut("slow");
        $(".item1").addClass('active');
        $(".item2,.item3").removeClass('active');
    });

    function doSomething() {
        $('.item1').trigger('click');
    };

    function doSomethingElse() {
        $('.item2').trigger('click');
    };

    function doSomethingUsefulThisTime() {
        $('.item3').trigger('click');
    };

    $('.item2').click(function () {
        $(".char1,.char3").fadeOut("slow");
        $(".char2").fadeIn("slow");
        $(".item2").addClass('active');
        $(".item1,.item3").removeClass('active');
    });
    $('.item3').click(function () {
        $(".char2,.char1").fadeOut("slow");
        $(".char3").fadeIn("slow");
        $(".item3").addClass('active');
        $(".item1,.item2").removeClass('active');
    });
});

到目前为止，我设法创建了这个https://jsfiddle.net/nq0s16q3/11/，但是很显然，这并不是最好的方法。也许有人对此有建议？我真的很感激，提前。

最佳答案

您将要使用setInterval，以便它连续循环您的卷轴，直到清除为止。我使用了一个函数，该函数采用活动项目的类并从中获取其编号。指定最大项目数，它将自动循环。这也可以使您添加或删除项目，不必更改顶部numItems变量之外的任何代码。

https://jsfiddle.net/nq0s16q3/15/

这是JavaScript：

var numItems = 3;
var intervalSpeed = 1500;

alternate = function() {
    var activeItem = $('.active');
    $('.item1,.item2,.item3').removeClass('active');
    fadeOutIn(activeItem.attr('class'));
}

fadeOutIn = function(itemClass) {
    var itemNum = parseInt(itemClass.replace('item', ''));
    var nextItemNum = itemNum + 1;
    if(nextItemNum > numItems) {
        nextItemNum = 1;
    }

    $('.char' + itemNum).fadeOut('slow');
    $('.char' + nextItemNum).fadeIn('slow');
    $('.item' + nextItemNum).addClass('active');
}

$(document).ready(function () {
    alternateTimeout = setInterval(alternate, intervalSpeed);

    $('.item1,.item2,.item3').click(function() {
        clearInterval(alternateTimeout);
        var activeItem = $('.active');
        $('.item1,.item2,.item3').removeClass('active');
        $('.' + activeItem.attr('class').replace('item', 'char')).fadeOut('slow');
        $('.' + $(this).attr('class').replace('item', 'char')).fadeIn('slow');
        $(this).addClass('active');
    });
});