无限循环滑块概念

  • Z时代
  • 2024-01-10
  • 分类：问答

我想知道使用JavaScript / jQuery为网站构建Infinity-Image-Loop-

Slider的最佳（好的可读性代码，有害生物实践代码，可重用性）概念是什么？我不知道如何编码幻灯片，但是什么蓝图符合上面提到的要求。我的问题的主要重点是如何排列图片以获得无限循环滑块的印象。

通过查看来自不同滑块的代码，我遇到了两种解决方案：

每次显示下一张/上一张图像时，更改所有图像的z索引。

-更改DOM中图像的位置。

但是检查和理解他人的代码非常耗时-这就是为什么我问这个问题:-)

回答：

无需花费太多精力即可创建无限图像滑块的一种简单方法如下：为了简单起见，您可以<n>循环滑动图像，以便在n第一个图像之后可视化的下一个图像是1st（并且反之亦然）。

这个想法是创建第一个和最后一个图像的克隆，以便

  • 最后一张图片的副本位于第一张图片之前；

  • 第一个图像的副本将附加在最后一个图像之后。

无论您的图像量是多少，您最多只需要追加2个克隆的元素。

再次为简单起见，假设所有图像都是100px宽的，并且将它们包裹在一个容器中，您可以使用左右将其移动到剪切蒙版中overflow:hidden。然后，所有图像都可以轻松地与容器连续对齐display: inline-block并white-space:

nowrap设置在容器上（flexbox现在更容易了）。

对于n = 4DOM结构，将如下所示：

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

可能更好（出于性能方面的考虑）transform:translateX(-100px)），因此滑块可以显示第一张图像。要从一张图片切换到另一张图片，您需要在以前选择的同一属性上应用javascript动画。

当你的滑块是目前在4个图像，你必须从图像切换4到1c，这样的想法是在动画结束后执行的回调，不久在真正的1个重新定位你的滑盖包装ST图像偏移量（例如你设置left:-100px到容器）

这类似于当滑块当前位于第一个元素上时：要显示先前的图像，您只需要从一个图像执行动画1即可4c；当动画完成后，只需移动容器即可，将滑块固定地位于第4个位置个图像偏移（例如，你设置left:-400px的容器）。

您可以看到上面的提琴效果：这是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 });
            }
        });   
     }
  });
});

如前所述，此解决方案不需要太多的工作和性能，只需将这种方法与不带循环的普通滑块进行比较即可，它仅需要在初始化滑块时再进行两次DOM插入，以及一些（非常琐碎的）额外逻辑管理后退/前进循环。

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

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

以上是 无限循环滑块概念 的全部内容， 来源链接： utcz.com/qa/409287.html

回到顶部