1

我用 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() 看起来也是一个潜在的问题 >.<

有任何想法吗？

4

1 回答 1

0

只是想到了一些事情：您可以尝试定位内部 div（通过$('#products div')withposition: relative;和lis获得的那个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 回答