Карусель изображений jQuery - Как я могу повторить изображения? - PullRequest
Новая
       17

Карусель изображений jQuery - Как я могу повторить изображения?

1 голос
/ 24 февраля 2010

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

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

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

JQuery 

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

   var $products = $('#products div');
   var posLeft   = 0;

   // Add 5 DIV overlays to use as 'hover buttons' for the slideshow speed
   for (i = 0; i <= 4; i++)
   {
      $('#products').append('<div class="hover-' + i + '" style="background: transparent; width: 100px; height: 167px; position: absolute; left: ' + posLeft + 'px; top: 15px;"></div>');
      posLeft += 100;
   }  

   // Function animate the scrolling DIV in the appropriate direction with the set speed
   function plz2scroll(direction, scrollSpeed)
   {
      var scrollDir    = (direction == 'left')  ? '-='  : '+=';
      var scrollOffset = (direction == 'right') ? '-10' : '+' + $products.css('width').substring(0, -2) + 10; // Fix the '+100px10' issue - Seems substring don't support negative offsets 

      $products.animate({scrollLeft: scrollDir + $products.css('width')}, scrollSpeed, 'linear', function()
      {
         $products.scrollLeft(scrollOffset);
         plz2scroll(direction, scrollSpeed);
      });
   }

   // Create the 'hover buttons'
   $('div.hover-0').hover(function() { $products.stop(); plz2scroll('right', 2000); });
   $('div.hover-1').hover(function() { $products.stop(); plz2scroll('right', 3500); });
   $('div.hover-2').hover(function() { $products.stop(); });
   $('div.hover-3').hover(function() { $products.stop(); plz2scroll('left',  3500); });
   $('div.hover-4').hover(function() { $products.stop(); plz2scroll('left',  2000); });
});

HTML 

<div id="products">
   <div>
      <ul>
         <li><img src="images/1.jpg" /></li>
         <li><img src="images/2.jpg" /></li>
         <li><img src="images/3.jpg" /></li>
         <li><img src="images/4.jpg" /></li>
         <li><img src="images/5.jpg" /></li>
      </ul>
   </div>
</div>

Скроллер работает, а скорость / направление прекрасно работают с наложенными кнопками DIV. Мой повторяющийся обратный вызов animate () медленный, глючный и просто плохой: /

Мое чрезмерное использование .stop () также выглядит как потенциальная проблема>. <</p>

Есть идеи?

1 Ответ

0 голосов
/ 24 февраля 2010

только что подумал: вы можете попытаться расположить внутренний div (тот, который получен $('#products div') с position: relative; и li s с position: absolute. Более того, внутренний div должен иметь overflow: hidden ( вероятно, уже так.) Позиции элементов списка теперь относительно окружающего элемента div, что облегчает вычисления.

Затем, вместо перемещения div в целом, перемещайте изображения по отдельности. Вы можете проверить, виден ли элемент чем-то вроде этого, например: 

function isItemVisible(li) {
    var w = li.outerWidth()
    var pos = li.position();
    return pos.left + w > 0 && pos.left < $products.innerWidth();
}

Вам все еще нужно выяснить, когда нужно переставлять отдельные элементы, но, возможно, это поможет вам начать работу. Возможно, вам придется поддерживать отдельную структуру данных, в которой вы можете изменить порядок элементов, когда это необходимо, или, по крайней мере, поддерживать указатель leftmost и rightmost на самый левый и самый правый (на данный момент) элемент.

...