无限循环滑块概念 [英] Infinity Loop Slider Concepts

问题描述

我不知道什么是最好的（可读的代码，害虫实践代码，可重用性）概念使用JavaScript / jQuery构建一个网站的无限图像循环滑块？我不知道如何编写幻灯片放映，但什么蓝图符合上面提到的要求。
我的问题的主要焦点是如何安排图片得到无限循环滑块的印象。

I wonder what are the best(good readable code, pest practice code,reusability) concepts to build a Infinity-Image-Loop-Slider for a Website using JavaScript/jQuery? I dont what to know how to code the Slide show but what blueprint matches the requirements mention above. The main focus of my question is how to arrange the pictures to get the impression of a infinity loop Slider.

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

By look at Code from different Sliders I came across two solutions:

所有图像每次显示下一个/上一个图像。

-change the z-Index of all Images each time the next/previous image is displayed.

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

-change the Position of the Image in the DOM.

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

But examine and understanding the code of others is very time-consuming - that's why I ask this question :-)

推荐答案

tl; dr - 示例： http://jsbin.com/ufoceq/8/ （完整解释如下）

tl;dr - Example: http://jsbin.com/ufoceq/8/ (full explanation here below)

---

一个简单的方法来创建一个无限的图像滑块没有太多的努力如下：让说为了简单起见，你有4个图像在循环中滑动，以便在4

---

A simple approach to create an infinite image slider without too much effort is as follows: let say for the sake of simplicity that you have 4 images to slide in a loop, so that after the 4^th image the next one to visualize is the 1^st (and vice-versa).

• 最后一张图片的克隆位于第一张图片的前面;

无论您的图片是多少，

Whatever is the amount of your images, you will need to append at most only 2 cloned elements.

再次为简单起见，让我们说所有的图片都是 100px wide，并且它们被包装在一个容器中，您可以向左/右移动到 overflow：hidden 中的掩码。

Again for the simplicity, let say that all images are 100px wide and they're wrapped in a container that you move left/right into a mask with overflow: hidden.

然后，所有图片都可以轻松地与 display：inline-block 和<$ c $

Then, all images can be easily aligned in a row with display: inline-block and white-space: nowrap set on the container.

DOM结构是这样的：

The DOM structure is thus something like this:

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 c $ c> margin-left：-100px 甚至更好（对于性能问题） transform：translateX（-100px）），因此滑块可以显示第一个图像。要从一张图片切换到另一张图片，您需要在之前选择的同一个媒体资源上应用JavaScript动画。

At the beginning, your container will be positioned with left: -100px (or also margin-left: -100px or even better (for a matter of performance) transform: translateX(-100px) ), so the slider can show the first image. To switch from an image to another you will need to apply a javascript animation over the same property you've previously chosen.

当滑块当前位于4 ^th 图像，您必须从图像 4 切换到 1c ，所以想法是执行动画结束时的回调很快就会将滑块包装器重新定位到真实的1 ^st 图像偏移位置（例如，将 left：-100px 该容器）

When your slider is currently at the 4^th image, you have to switch from image 4 to 1c, so the idea is to execute a callback at the end of the animation that soon reposition your slider wrapper at the real 1^st image offset (e.g. you set left: -100px to the container)

当滑块当前位于1 ^st 元素时，这是类似的：显示您需要执行的上一个图片动画从图像 1 到 4c ，当动画完成后，您只需移动容器，使滑块永远定位在4 th 图像偏移（例如，您将 left：-400px 添加到容器）。

This is analogous when your slider is currently positioned on the 1^st element: to show the previous image you just need to perform an animation from image 1 to 4c and when animation has been completed you just move the container so the slider is istantly positioned at the 4^th image offset (e.g. you set left: -400px to the container).

您可以看到这个小提琴的效果： http://jsbin.com/ufoceq/8/

You can see the effect on this fiddle: http://jsbin.com/ufoceq/8/

这是最小的 js / jquery 代码我使用（当然代码可以进行优化，所以项目的宽度不是硬编码到脚本中）

This is the minimal js/jquery code I used (of course the code can be even optimized so the width of the items is not hardcoded into the script)

$(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插入当滑块被初始化和一些（很简单）额外的逻辑来管理向后/向前循环。

---

As mentioned before, this solution doesn't require really much effort and talking about performance, comparing this approach to a normal slider without looping, it only requires to make two additional DOM insertion when the slider is initialized and some (quite trivial) extra logic to manage a backward/forward loop.

我不知道，如果一个简单的或更好的方法存在，但希望这有助于反正。

I don't know if a simpler or better approach exists, but hope this helps anyway.

注意：如果您还需要有一个敏感的画廊，也许这个答案可以帮助过

Note: if you need to also have a responsive gallery, maybe this answer may help too

这篇关于无限循环滑块概念的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！