jQuery: каждые 5 секунд автоматически нажимать на следующее изображение в списке?

Question

У меня есть заданный список изображений, представленный в виде миниатюр:

<ul id="thumbs">
    <li class="small-img"><img src="images/feature1.png" /></li>
    <li class="small-img"><img src="images/feature2.png" /></li>
    <li class="small-img"><img src="images/feature3.png" /></li>
</ul>

Я использую jQuery, чтобы, когда пользователь нажимает на изображение, он заменял изображение в div (которое я получил из другого StackOverflow Спросите ):

$('#thumbs img').click(function(){
    $('div.feature-photo img').hide().attr('src',$(this).attr('src')).fadeIn();
});

Мой вопрос: есть ли способ превратить его в слайд-шоу?Может, автоматически «кликать» на следующую картинку каждые 5 секунд?setInterval играет роль в этом?Я пытаюсь быть по-настоящему базовым и избегать использования большего количества плагинов, чем нужно.(Но если нет другого пути, я его рассмотрю ..)

Буду признателен за любую помощь.

Answer 1

Вы можете легко рассчитать следующее изображение в функции переключения. Таким образом, вы не испортите свое пространство;)

(function switchToImage(img) {
  $(img).click()
  var images = $('#thumbs img');
  var nextIndex = ($.inArray(images, img) + 1) % images.length;
  setTimeout(function() { 
    switchToImage(images[nextIndex]) 
  }, 5000);
})($('#thumbs img')[0]);

Answer 2

Вы можете пойти простым путем JQuery, если хотите.Вот моя попытка

var intervalId;
$(function(){


function cycleImage(){

    var onLastLi = $("#thumbs li:last").hasClass("current");       
    var currentImage = $("#thumbs li.current img");
    var targetImage = $('div.feature-photo img');             
    $(targetImage).hide().attr('src', $(currentImage).attr('src')).fadeIn();

    var currentLi = $("#thumbs li.current");
    currentLi.removeClass("current");

    if(onLastLi){
        $("#thumbs li:first").addClass("current");
    }else{        
        currentLi.next().addClass("current");
    }

};

 intervalID = setInterval(cycleImage, 5000);



})

И вы можете найти ее в действии здесь

Answer 3

setInterval может быть ответом на ваш вопрос

var currImg = 0;
var $images;
$(document).ready(function() {
    $images = $('#thumbs img');
    changeImg();
    window.setInterval(function() {
        currImg++;
        if(currImg == $images.length) currImg = 0;
        changeImg();
    }, 5000);
});

function changeImg() {
    $('div.feature-photo img').hide().attr('src',$images.eq(currImg).attr('src')).fadeIn();
}

Answer 4

Вы должны думать о том, что должен делать ваш код , а не о том, что делает пользователь, который запускает ваш код.Таким образом, вместо того, чтобы «автоматически« щелкать »», вы просто хотите, чтобы ваш код автоматически отображал следующее изображение.

Итак, первым шагом является удаление кода из обработчика click:

function showImage(img){
    $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn();
}

$('#thumbs img').click(function() {
    showImage(this);
});

И тогда возникает вопрос: как мне звонить showImage каждые пять секунд со «следующим» изображением.Ну, во-первых, мы хотим вспомнить, что такое «текущее» изображение.Достаточно просто изменить наш showImage, чтобы сделать это:

var current = null;
function showImage(img){
    current = img;
    $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn();
}

Итак, нам просто нужен триггер, который произойдет через пять секунд.Вы можете использовать setInterval, но я обнаружил, что действительно легко выйти из-под контроля, поэтому вместо этого я использую цепочечную серию setTimeout, где каждый устанавливает следующий.И что было бы хорошим стимулом для этого?Ну, через пять секунд после того, как пользователь щелкнет изображение, так что, вероятно, прямо в showImage:

var current = null;
var timer = 0;
function showImage(img){
    current = img;
    $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn();
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(nextImage, 5000);
}

Хорошо, так как же должен выглядеть nextImage?Я бы сказал, что мы, вероятно, хотим использовать current, возможно:

function nextImage() {
    var $current;

    if (timer) {
        clearTimeout(timer);
        timer = 0;
    }
    if (current) {
       $current = $(current);
       next = $current.nextAll("img")[0];
       if (!next) {
           $current.siblings("img")[0];
       }
       if (next) {
           showImage(next);
       }
    }
}

Вы можете начать все сначала, показав первое изображение:

showImage($("#thumbs img")[0]);

Так чтовсе вместе, и убедитесь, что мы обертываем его в функцию определения объема, чтобы мы не создавали глобальные символы:

(function() {
    var current = null;
    var timer = 0;

    function showImage(img){
        current = img;
        $('div.feature-photo img').hide().attr('src',$(img).attr('src')).fadeIn();
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(nextImage, 5000);
    }

    function nextImage() {
        var $current;

        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }
        if (current) {
           $current = $(current);
           next = $current.nextAll("img")[0];
           if (!next) {
               $current.siblings("img")[0];
           }
           if (next) {
               showImage(next);
           }
        }
    }

    $('#thumbs img').click(function() {
        showImage(this);
    });
    showImage($("#thumbs img")[0]);

})();

(Или вместо ванильной функции определения объема вы можете использовать jQuery ready.)

Выше приведено довольно грубое и полностью непроверенное, но вы поняли.

Answer 5

Вы можете использовать

setTimeout(function(){
    //trigger next picture}
,5000);

Но вы должны помнить, что если пользователь перезагрузит страницу, тайм-аут начинается с нуля!