如何使用 JavaScript/jQuery 创建无限图像循环滑块？

无限循环滑块概念

本文讨论了构建无限图像循环的最佳实践，例如可读性、代码可重用性和良好的编码实践-使用 JavaScript/jQuery 的网站滑块。重点是如何排列图片以创建无限循环滑块的错觉。

实现无限循环滑块

创建无限图像滑块的一种简单方法如下：假设您有“n”张图像要循环滑动，第一个图像位于第 n 个图像之后，反之亦然。创建第一个和最后一个图像的克隆，然后执行以下操作：

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

无论图片数量多少，最多只需要插入两个克隆项目。

假设所有图片都是 100px 宽，并显示在一个有溢出的容器中： hide、display: inline-block、white-space: nowrap，容纳图像的容器可以轻松地排成一行。

对于 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，允许显示第一张图像。要在图像之间切换，请将 JavaScript 动画应用于您最初选择的 CSS 属性。

• 当滑块位于第 4 个图像上时，移动到图像 1c 涉及从图像 4 到 1c 的动画。动画完成后，立即将滑块包装器重新定位在第一个图像的实际偏移处（例如，将 left: -100px 设置为容器）。
• 同样，当滑块位于第一个元素上时，执行从图像 1 到 4c 的上一个动画并将容器移动到第 4 个图像偏移（左：到容器的 -400px）足以显示上一个图像。

编排幻灯片循环

随附的小提琴演示了这种效果。下面是使用的基本 JavaScript/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 });
            }
        });   
     }
    
  });
});

结论

这个解决方案相对简单高效，与非-循环滑块。

虽然可能存在替代方法，但此方法为创建无限循环滑块提供了实用且有效的解决方案。

以上是如何使用 JavaScript/jQuery 创建无限图像循环滑块？的详细内容。更多信息请关注PHP中文网其他相关文章！