Вопросы Теги

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

Это - код для увядшего слайд-шоу. Существует ли способ повторить или циклично выполнить эту очередь? Запускаться снова на этом главном коде $("#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);
});

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

1
задан Nick Craver 18 July 2010 в 12:57
поделиться

3 ответа

вы можете использовать обратный вызов 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();
});

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

2
ответ дан 2 September 2019 в 22:57
поделиться

Используйте 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
ответ дан 2 September 2019 в 22:57
поделиться

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

$(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();  
});​

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

Компоненты:

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

Похожие вопросы: