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

您需要使用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');
    });
});

Answer 2

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

var slideShow = setTimeout(slideFunction, 3000);

//on user click image
slideShow = null;

像这样的东西

setTimeout控件

2 个答案: