Question

我在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（）也看起来像是潜在的问题＆gt;。＆lt;

有什么想法吗？

Answer 1

只是想到了一些事情：你可以尝试定位内部div（$('#products div')获得position: relative;而li获得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指针。

jQuery图像轮播 - 如何重复图像？

1 个答案: