Как повторить или зациклить эту очередь на jQuery? - PullRequest
Новая
       37

Как повторить или зациклить эту очередь на jQuery?

1 голос
/ 18 июля 2010

Это код для выцветшего слайд-шоу.Есть ли способ повторить или зациклить эту очередь?Чтобы начать снова с этого топ-кода $("#page2_image").hide();

Вот код в jQuery: 

$(document).ready(function(){
   $("#page2_image").hide();
   $("#page3_image").hide();
   $("#page1_image").fadeOut(10000);
   $("#page2_image").fadeIn(10000).fadeOut(10000);
   $("#page3_image").delay(10000).fadeIn(10000);
});

Спасибо за вашу помощь!

Ответы [ 3 ]

2 голосов
/ 18 июля 2010

вы можете использовать обратный вызов fadeIn()

$(document).ready(function(){
   function loop(){
   $("#page2_image").hide();
   $("#page3_image").hide();
   $("#page1_image").fadeOut(10000);
   $("#page2_image").fadeIn(10000).fadeOut(10000);
   $("#page3_image").delay(10000).fadeIn(10000,loop); // call loop here...
  }
  loop();
});

, вы также можете попробовать аналогичный подход здесь

0 голосов
/ 18 июля 2010

Используйте setInterval, чтобы функция повторялась каждые X секунд. 

function slideSwitch() {
   $("#page2_image").hide();
   $("#page3_image").hide();
   $("#page1_image").fadeOut(10000);
   $("#page2_image").fadeIn(10000).fadeOut(10000);
   $("#page3_image").delay(10000).fadeIn(10000);
}

$(function() {
    setInterval( slideSwitch, xxxx );
});
0 голосов
/ 18 июля 2010

Я думаю, что вы ищете немного другой подход, что-то вроде этого: 

$(function() {
  var images = ['#page1_image', '#page2_image', '#page3_image'], i = 0;
  function rotate() {
    $(images[i]).fadeOut(10000);
    i = (i+1)%images.length;
    $(images[i]).fadeIn(10000, rotate);
  } 
  $.each(images.slice(1), function(index, val) { $(val).hide(); });
  rotate();  
});​

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

Компоненты:

  • Настройка массива селекторов на исчезновение ... вы можете даже кэшировать селекторы здесь, если они не идентификаторы, это хорошая идея, а не строки.
  • Поворот затухает в текущем, получает следующее (при необходимости оборачивая) и затухает, .fadeIn() снова вызовет rotate, когда это будет сделано.
  • Последнее, что мы скрываем все изображения, кроме первого (через .slice()) и запуска цикла.
...