setTimeout controls

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; 

Что-то вроде этого