setTimeout 控件

Question

我是 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/，但很明显这不是最好的方法。也许有人对此有建议？非常感谢，提前谢谢。

Answer 1

您可以将 setTimeout 函数分配给一个变量，并在单击图像按钮时将其分配给 null。然后运行一个 setInterval 函数再次启动 setTimeout 函数。

var slideShow = setTimeout(slideFunction, 3000);

//on user click image
slideShow = null;

类似的东西

Answer 2

您需要使用 setInterval 以便它不断循环您的卷轴，直到它被清除。我使用了一个函数，该函数获取活动项目的 class 并从中获取其编号。指定项目的最大数量，它会自动循环它们。这也将使它如此，如果您添加或删除一个项目，您不必更改顶部 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');
    });
});

setTimeout 控件

setTimeout controls

jquery

timer

slideshow