1

I've written an image slideshow in jQuery that speeds up/down based on where the mouse is hovering over the images.

I'd like to have the images 'repeat' as the slideshow ends. So the user scrolls through the slideshow, it reaches the end of the image LI's and then seamlessly repeats from the start.

Here's the current code:

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>

The scroller works and the speed/direction works nicely with the overlayed DIV buttons. My animate() callback to repeat is slow, buggy and just bad :/

My overuse of .stop() also looks like a potential problem >.<

Any ideas?

4

1 に答える 1

0

何かを考えただけです: 内側の div ( $('#products div')withposition: relative;とlis withによって取得されたもの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

于 2010-02-24T04:35:57.810 に答える