Jquery каждый, как сделать reloop после окончания

Question

У меня есть этот код для запуска слайд-шоу (это только часть того, что действительно происходит в моем коде)

var slideshow = {
        delay: 5000,
        actions:[],
        run: function() {
                if (slideshow.actions.length) {
                        slideshow.actions.shift()();
                        setTimeout(slideshow.run, slideshow.delay);
                }
        }
};
 var tn;
$(".sideimg").each(function(){
        var that = this;

        slideshow.actions.push(function(){
 if (tn != "") {
  out(tn);
 }
 over($(that).attr("id"));
 var $paneTarget = $('#lyr1');

 var $target = $paneTarget.find('#'+$(that).attr("id"));
 $paneTarget.stop().scrollTo( $target , 800 );

 $("#rimg").fadeOut("slow",function () {
 $("#rimg").attr("src",$(that).attr("bsrc")); 
 $("#rimg").attr("alt",$(that).attr("alt")); 
   $("#rimg").fadeIn("normal");
  });
 tn = $(that).attr("id");

        });

});

после окончания запуска каждого класса sideimg он останавливается ... мне нужно начинать заново с самого начала ... Я пытался вспомнить это - но ничего не случилось

спасибо, ребята

Answer 1

в вашем методе Run вы сдвигаете элементы массива ... это удаляет их из массива .. вы должны сдвинуть его, а затем вставить обратно в конец ...

var slideshow = {
        delay: 5000,
        actions: [],
        timer: null,
        pause: function(){ clearTimeout( slideshow.timer ); },
        resume: function(){ slideshow.timer = setTimeout(slideshow.run, slideshow.delay); },
        run: function() {
                    if (slideshow.actions.length) {
                            var current = slideshow.actions.shift();
                            current();
                            slideshow.actions.push( current );
                            slideshow.timer = setTimeout(slideshow.run, slideshow.delay);
                    }
            }
};

Я только что добавилпеременная таймера, которая будет содержать объект тайм-аута, чтобы вы могли очистить его по требованию, а также несколько методов для запуска / остановки слайд-шоу ..

теперь просто добавьте события наведения к элементам, которые вы хотите запустить/ остановить слайд-шоу с помощью slideshow.pause() или slideshow.resume()

Answer 2

В этой ситуации я бы вообще не использовал каждый метод. Я бы использовал setTimeout, массив объектов, который содержит информацию о вашем изображении / href, и значение, которое говорит вам, где вы находитесь в массиве изображений. Когда вы доберетесь до конца массива, сбросьте значение (следующий код упрощен для ясности и не проверен):

var index = 0;
var images = // array of image containing objects here. 

function RunSlideShow()
{
     // modify the following line to perform any effects, etc, and other attribute settings you need. 
     $("#rimg").attr("src", images[index].image);

     index = index + 1;
     if (index = images.length)
         index = 0;
     window.setTimeout('RunSlideShow();', 5000);
}

RunSlideShow();

Каждый раз, когда вызывается функция в вашем объекте слайд-шоу, вам действительно нужно, чтобы эта функция загружала следующий слайд перед его выходом. Проблема с каждым перезапуском, когда он сделан, это вопрос: «Когда он остановится?» Если вы предварительно загрузите все изображения, чтобы продолжать вечно, вы будете вызывать бесконечный цикл и, скорее всего, вылетит браузер. Вам нужна та же функция, чтобы установить изображение, затем подготовить следующее изображение для показа, но в будущем оно должно выглядеть не дальше, чем следующее изображение. Каждый раз, когда вы пытаетесь пойти дальше, вы рискуете создать постоянно растущую коллекцию предметов, которые никогда не остановятся.