javascript - 当有 3 张或更多幻灯片时轮播工作，但只有 2 张幻灯片时会损坏

Question

我构建了一个最小的旋转木马，当有 3 个或更多幻灯片时它似乎工作正常，但一旦我删除了一些幻灯片，事情就开始崩溃了。我注意到的一些事情是:

1. 它删除了“下一个”的滑动动画
2. 它会让我的 div 闪烁
3. 它将完全破坏动画

我研究了一些可能的解决方案，这些解决方案在第一张幻灯片上处理 .clone()，然后是 .append() 到容器的末尾，这使得它有点工作，但它通常只会旋转 1 圈，然后卡在 slide2 上。

这是我处理点击上一个/下一个按钮的逻辑

var before_clone = $(elm + ':first').clone();
var after_clone = $(elm + ':last').clone();
$('#buttons a').click(function(e) {
    //slide the item
    if (container.is(':animated')) {
        return false;
    }
    if (e.target.id == previous) {
        container.stop().animate({
            'left': 0
        }, 1500, function() {
            //container.find(elm + ':first').before(container.find(elm + ':last'));
            container.append(after_clone);
            container.find(elm + ':last');
            resetSlides();
        });
    }
    if (e.target.id == next) {
        container.stop().animate({
            'left': item_width * -1
        }, 1500, function() {
            //container.find(elm + ':last').after(container.find(elm + ':first'));
            container.append(before_clone);
            container.find(elm + ':first');
            resetSlides();
        });
    }
    //cancel the link behavior            
    return false;
});

这是我处理自动动画的逻辑

function rotate() {
    $('#next').click();
      container.append(before_clone);
      container.append(after_clone)
}

---

这里还有两个 fiddle 可以帮助诊断我的问题

my current attempt

my original code(make sure to remove/comment out 2 of the lis)

感谢您为解决此问题提供的任何帮助! 谢谢!

Answer 1

看看this fiddle 。

我将您的 next 更改为以下内容:

  if (e.target.id == next) {
    container.find(elm + ':last').after(container.find(elm + ':first'));
    container.css({
      'left': 0
    });
    container.stop().animate({
      'left': item_width * -1
    }, 1500, function () {
      resetSlides();
    });
  }