Javascript 无限循环滑块概念

我想知道使用JavaScript/jQuery为网站构建无限图像循环滑块的最佳概念（可读性好的代码、有害程序实践代码、可重用性）是什么？我不知道如何编写幻灯片，但什么蓝图符合上述要求。 我的问题的主要焦点是如何安排图片以获得无限循环滑块的印象

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

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

-更改图像在DOM中的位置

---

但是检查和理解他人的代码非常耗时——这就是为什么我要问这个问题：——）

tl；dr-JSBin示例：

---

创建无限图像滑块的简单方法如下：为了简单起见，假设您有

图像以循环方式滑动，以便在

n

第个图像之后，下一个要可视化的图像是

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 ]
*/

开始时，您的容器将放置在

左：-100px

（或

边距左：-100px

变换：translateX（-100px）

），因此滑块可以显示第一个图像。要从一个图像切换到另一个图像，需要在先前选择的相同属性上应用javascript动画

当您的滑块当前位于第4个图像时，您必须从图像

4

切换到

1c

，因此在动画结束时执行回调，很快将滑块包装重新定位在实际的第一个图像偏移处（例如，您将

左：-100px

设置为容器）

这与滑块当前位于第一个元素上时类似：要显示上一个图像，只需执行从图像

1

到

4c

的动画，动画完成后，只需移动容器，使滑块固定在第四个图像偏移处（例如，您将

左侧：-400px

设置为容器）

---

您可以在上面的提琴上看到效果：这是我使用的最小的

js/jquery

代码（当然，代码甚至可以优化，因此项目的宽度不会硬编码到脚本中）

---

如前所述，此解决方案不需要花费太多精力和讨论性能，将此方法与无循环的普通滑块进行比较，它只需要在滑块初始化时进行两次额外的DOM插入，以及一些（非常简单的）额外逻辑来管理向后/向前循环

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

我不知道是否存在更简单或更好的方法，但希望这能有所帮助

---

注意：如果您还需要一个快速响应的图库，可能也会有所帮助

非常感谢本文！ 我已经更新并使用了上面的代码。 我希望这对大家都有帮助。 可怜的开发者

定向滑块
/* 四联切换焦点图 */
.slides包装{位置：相对；宽度：100%；边距：10px 0；}
.gallery{位置：相对；宽度：1200px；高度：180px；溢出：隐藏；}
.gallery ul{字体大小：0；空白：nowrap；位置：绝对；顶部：0；左侧：-1200px；边距：0；填充：0；}
.gallery li{显示：内联块；垂直对齐：顶部；宽度：1200px；高度：180px；空白：正常；}
.gallery li img{宽度：298px；高度：180px；填充：1px；}
.gallery.arrow{背景：url（/shop/templates/default/images/home_bg.png）不重复；背景大小：150px 223px；宽度：35px；高度：70px；位置：绝对；z索引：2；顶部：50px；光标：指针；不透明度：0；}
.gallery.prev{背景位置：1px-92px；左侧：0；}
.gallery.next{背景位置：-30px-92px；右：0px；}
.demo_包装{
保证金：0自动；
宽度：1200px；
}
.demo_wrapper.title{
文本对齐：居中；
}
指令滑块（fenmingyu出版）














$（函数（）{
$.fn.gallery
$(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 });
            }
        });   
     }
    
  });
});