首页  >  文章  >  web前端  >  如何使用 JavaScript/jQuery 实现无缝无限循环图像滑块?

如何使用 JavaScript/jQuery 实现无缝无限循环图像滑块?

Susan Sarandon
Susan Sarandon原创
2024-11-01 16:45:02978浏览

How to Achieve a Seamless Infinity Loop Image Slider Using JavaScript/jQuery?

使用 JavaScript/jQuery 的无限循环滑块设计概念

要创建具有最佳代码可读性、可维护性和可重用性的无限循环图像滑块,考虑以下蓝图:

无限循环效果的图像排列

要实现无限循环的幻觉,请实现以下两种方法之一:

  • 更改 z 索引:随着下一张或上一张图像可见,调整每个图像的 z 索引。
  • 修改 DOM 位置:移动图像在 DOM 中创建滚动或循环的外观。

克隆图像以实现无缝循环

要创建无限循环,请克隆第一个和最后一个图像在序列中。然后,在滚动时:

  • 从图像 n 转换到图像 1 时,在动画完成后立即将容器移动到真实的第一个图像的偏移位置。
  • 从图像 1 转换到图像 1 时图像 n,动画完成后立即将容器移动到真实的第 n 个图像的偏移量。

示例代码

将以下 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn