javascript - 无限循环 slider 概念

Question

我想知道使用 JavaScript/jQuery 为网站构建 Infinity-Image-Loop-Slider 的最佳(良好可读代码、有害实践代码、可重用性)概念是什么？我不知道如何编写幻灯片放映代码，但什么蓝图符合上述要求。 我的问题的主要焦点是如何排列图片以获得无限循环 slider 的印象。

通过查看来自不同 slider 的代码，我发现了两种解决方案:

-每次显示下一张/上一张图像时更改所有图像的 z-Index。

- 更改图像在 DOM 中的位置。

但是检查和理解别人的代码是非常耗时的——这就是我问这个问题的原因:-)

Answer 1

tl;dr - JSBin 示例:http://jsbin.com/ufoceq/8/

---

无需太多努力即可创建无限图像 slider 的简单方法如下:为简单起见，假设您有 <n>图像循环滑动，以便在 n 之后^th 下一个要可视化的图像是 1 ^st(反之亦然)。

我们的想法是创建第一张和最后一张图像的克隆

• 最后一张图片的克隆放在第一张之前；
• 第一个图像的克隆附加在最后一个图像之后。

无论您的图片有多少，您最多只需要附加 2 个克隆元素。

再次为简单起见，假设所有图像都是 100px宽，它们被包裹在一个容器中，您可以使用 overflow: hidden 向左/向右移动到一个剪裁的面具中.然后，所有图像都可以很容易地排成一行 display: inline-block和 white-space: nowrap在容器上设置(使用 flexbox 现在更容易)。

对于 n = 4 DOM 结构将是这样的:

offset(px)     0       100     200     300     400     500
images         |   4c   |   1   |   2   |   3   |   4   |   1c
                                                   
/*                 ^^                                       ^^
       [ Clone of the last image ]              [ Clone of the 1st image ]
*/

一开始，你的容器会定位在left: -100px (或者也是 margin-left: -100px or even better (for a matter of performance) transform: translateX(-100px) )，所以 slider 可以显示第一张图片。要从一个图像切换到另一个图像，您需要在您之前选择的同一属性上应用 javascript 动画。

当您的 slider 当前位于第 4 个^th 图像时，您必须从图像 4 切换至 1c ，所以我们的想法是在动画结束时执行回调，很快将您的 slider 包装器重新定位在真正的 1^st 图像偏移处(例如，您将 left: -100px 设置为容器)

这类似于当您的 slider 当前位于第一个^st 元素上时:要显示上一张图像，您只需要从图像 1 执行动画。至 4c当动画完成后，您只需移动容器，使 slider 立即定位在第 4 个 图像偏移处(例如，您将 left: -400px 设置为容器)。

---

您可以在上面的 fiddle 上看到效果:这是最小的 js/jquery我使用的代码(当然代码甚至可以优化，因此元素的宽度不会硬编码到脚本中)

$(function() {
 
  var gallery = $('#gallery ul'),
      items   = gallery.find('li'),
      len     = items.length,
      current = 1,  /* the item we're currently looking */
      
      first   = items.filter(':first'),
      last    = items.filter(':last'),
      
      triggers = $('button');
  
  /* 1. Cloning first and last item */
  first.before(last.clone(true)); 
  last.after(first.clone(true)); 
  
  /* 2. Set button handlers */
  triggers.on('click', function() {

    var cycle, delta;
    
    if (gallery.is(':not(:animated)')) {
     
        cycle = false;
        delta = (this.id === "prev")? -1 : 1;
        /* in the example buttons have id "prev" or "next" */  
    
        gallery.animate({ left: "+=" + (-100 * delta) }, function() {
      
            current += delta;
       
            /** 
             * we're cycling the slider when the the value of "current" 
             * variable (after increment/decrement) is 0 or when it exceeds
             * the initial gallery length
             */          
            cycle = (current === 0 || current > len);
       
            if (cycle) {
                /* we switched from image 1 to 4-cloned or 
                   from image 4 to 1-cloned */
                current = (current === 0)? len : 1; 
                gallery.css({left:  -100 * current });
            }
        });   
     }
    
  });
});

---

如前所述，这个解决方案并不需要太多的努力和谈论性能，将这种方法与没有循环的普通 slider 进行比较，它只需要在 slider 初始化时进行两次额外的 DOM 插入和一些(非常简单) 管理后向/前向循环的额外逻辑。

这是您同时看到两个元素的另一个示例:在这种情况下，您需要克隆更多元素并对逻辑进行一些简单的更改

https://codepen.io/fcalderan/pen/bGbjZdz

我不知道是否存在更简单或更好的方法，但无论如何希望这对您有所帮助。

注意:如果您还需要有一个响应式画廊，也许this answer也可能有帮助