jQuery - попытка создать «бесконечное слайд-шоу» изображений - PullRequest
Новая
       39

jQuery - попытка создать «бесконечное слайд-шоу» изображений

2 голосов
/ 02 марта 2010

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

  1. Сдвигает изображения через окно
  2. Когда достигается последнее изображение, оно начинается с начала изображений

Вот мой текущий код: 

var direction = '-';

function doScroll()
{
   $('#products ul').animate({left: direction + '500'}, 5000, function()
   {
      if (direction == '-')
      {
          $('#products li:first').before($('#products li:last'));
      }
      else
      {
         $('#products li:last').after($('#products li:first'));
      }
   });
}

$(document).ready(function()
{
   $('#products ul').css({'width': $('#products ul li').length * 185});

   plzscroll = setInterval("doScroll()", 1000);
});

Причиной setInterval () является создание бесконечной анимации.

Согласно Firebug, UL прокручивается на 500px влево и затем останавливается ... Однако ЛИ успешно перемещается. Первое изображение помещается в конец слайд-шоу и продолжается.

Все, что мне нужно, это выяснить, почему анимация не продолжает скользить UL.

Ответы [ 2 ]

2 голосов
/ 02 марта 2010

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

Попробуйте это: 

var direction = '-=';
function doScroll()
{
   $('#products ul').animate({left: direction + '500'}, 5000, function()
   {
      if (direction == '-=')
      {
          $('#products li:first').before($('#products li:last'));
      }
      else
      {
         $('#products li:last').after($('#products li:first'));
      }
      setTimeout(doScroll, 1000);
   });
}

$(function()
{
   $('#products ul').css({'width': $('#products ul li').length * 185});
   setTimeout(doScroll, 1000);
});

Это запускает следующую анимацию через 1 секунду после завершения этой анимации, надеюсь, это что-то вроде того, что вам нужно.

Примечание: старайтесь не использовать eval() Это то, что делает передачу строки в setTimeout() или setInterval(), вместо этого передайте функцию или анонимную функцию, как у меня выше.

0 голосов
/ 02 марта 2010

Необычно, что вы изменяете dom в своей анимации с помощью before () и after (). Я бы попытался переписать метод так, чтобы единственное, что изменилось, это позиция элемента #products ul. Обратите внимание, что для поддержания эффекта плавной прокрутки вам придется дублировать первый и последний элементы в вашем списке. Или изображения загружаются динамически?

...