Как сделать галерею jQuery с бесконечным циклом

Я создал слайд-шоу изображений с помощью jQuery, где 5 изображений появляются одно за другим с интервалом в 25 секунд. Каждое изображение остается включенным в течение 5 секунд, а затем исчезает, а затем появляется следующее изображение.
Слайд-шоу работает нормально, но я хочу, чтобы оно повторялось вечно, т.е. после последнее изображение исчезает, следует перезапустить анимацию с первого изображения.
Я пытался использовать setInterval, но не смог. Вот рабочий пример слайд-шоу, которое я закодировал:

JSfiddle

Вот полный код:

HTML:

<img id="img1" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img2" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-1.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img3" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-2.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img4" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-3.jpg" style="display: block; width: 50%; position: absolute;" />
<img id="img5" src="http://njballroomdancecenter.com/wp-content/uploads/2013/08/1500x1000-4.jpg" style="display: block; width: 50%; position: absolute;" />

JavaScript:

$(document).ready(function(){
    $("#img2,#img3,#img4,#img5").hide();
    setTimeout(function(){
        $("#img1").fadeOut("slow", function () {});
    }, 5000);
    setTimeout(function(){
        $("#img2").fadeIn("slow", function () {});
    }, 5000);    
    setTimeout(function(){
        $("#img2").fadeOut("slow", function () {});
    }, 10000); 
    setTimeout(function(){
        $("#img3").fadeIn("slow", function () {});
    }, 10000);
    setTimeout(function(){
        $("#img3").fadeOut("slow", function () {});
    }, 15000); 
    setTimeout(function(){
        $("#img4").fadeIn("slow", function () {});
    }, 15000);
    setTimeout(function(){
        $("#img4").fadeOut("slow", function () {});
    }, 20000);
    setTimeout(function(){
        $("#img5").fadeIn("slow", function () {});
    }, 20000);
    setTimeout(function(){
        $("#img5").fadeOut("slow", function () {});
    }, 25000);
});

javascript html jquery slideshow jsfiddle
person Fahad Hasan    schedule 26.08.2013    source источник
comment
вы пытались обернуть его в setInterval()? w3schools.com/jsref/met_win_setinterval.asp   -  person ntgCleaner    schedule 27.08.2013
comment
ради бога, у них все еще есть актуальная информация. То, что у них есть несколько ошибок, не означает, что они прокаженные.   -  person ntgCleaner    schedule 27.08.2013
comment
Роко, это всего лишь твое мнение (и притом дезинформированное). Это ни в коем случае не правило, и вы ни в коем случае не должны преподносить его как таковое.   -  person Shan Robertson    schedule 27.08.2013

Ответы (4)


arrow_upward
2
arrow_downward

Сделайте один цикл в функции. Попросите функцию вызвать себя после setTimeout. Он должен работать вечно. Вы бы хотели, чтобы некоторая логика массива перебирала изображения. Что-то вроде этого:

function go(i) {
  setTimeout(function(){
    $('#img'+i).fadeOut(5000);
    if (i<6) i=1;    
    else i++;
    go(i);
  },5000);
}
go(1);
person sroskelley    schedule 26.08.2013
comment
+1 Вы также можете добавить дополнительные строки для проверки i % images.length (вместо if else) - person Roko C. Buljan; 27.08.2013

arrow_upward
1
arrow_downward

Один из способов сделать это можно решить с помощью стандартного javascript, и, как предложил ntgCleaner в комментариях, через функцию setInterval(function, time).

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

function wrapper() {
   allYourCode()
}

setInterval(wrapper, 90000) // running the function wrapper every 1,5 minute.
person Daniel Varab    schedule 26.08.2013

arrow_upward
1
arrow_downward

Мне нравится решение runfaj, но для завершения вот решение setInterval(..). Используйте setTimeout для правильной синхронизации, когда должен выполняться тайм-аут setInterval. Фрагмент примера с jsfiddle:

var singleImageDisplayTime = 5000;
var completeLoopTime = 5 * singleImageDisplayTime;

function fadeInFunction(jquerySelector) {
    $(jquerySelector).fadeIn("slow", function () {});
}
function fadeOutFunction(jquerySelector) {
    $(jquerySelector).fadeOut("slow", function () {});
}
...
setTimeout(function () {
    fadeInFunction("#img1");
    setInterval(function() { fadeInFunction("#img1"); }, completeLoopTime);
}, 5 * singleImageDisplayTime);
setTimeout(function () {
    fadeOutFunction("#img1");
    setInterval(function() { fadeOutFunction("#img1"); }, completeLoopTime);
}, 1 * singleImageDisplayTime);
...
person Fiddles    schedule 26.08.2013

arrow_upward

arrow_downward

person    schedule
comment
Большое спасибо за ответ. Это именно та функциональность, которую я хотел, и это был самый простой ответ. Еще раз спасибо. - person Fahad Hasan; 27.08.2013
comment
@Plymouth223 спасибо! P.S: $(function(){ ..... }); не настолько пуленепробиваемый против использования псевдонима $ из других библиотек, но только внутри среды jQuery. - person Roko C. Buljan; 27.08.2013