使用 jQuery 动态地前后运行幻灯片

Question

我有一个 DIV 容器，里面有子图像。 类似这样的结构：

<div class="look-down">
  <img src="look-down-1.jpg">
  <img src="look-down-2.jpg">
  <img src="look-down-3.jpg">
  <img src="look-down-4.jpg">
  <img src="look-down-5.jpg">
</div>

所有图像都被任一 display:none; 隐藏。或 - 不透明度：0；

现在我有一个按钮：“运行动画”和“向后运行动画”

<button id="animate-images">Run Animation</button>
<button id="animate-images-reverse">Run Animation Backwards</button>

单击“运行动画”后，我想循环浏览所有图像并从第一张开始，然后移至第二张显示下一张照片。 基本上它会显示“逐帧”动画，我可以控制节奏

单击“向后运行动画”后，我想同样向后运行。基本上是反转动画

两件重要的事情：

• 我需要它是动态的，以便我可以添加/删除图像
• 我需要控制每张图片之间的秒数/毫秒数

我创建了一个初学者小提琴： https://jsfiddle.net/hamergil/jdg1fy9q/30/

不胜感激

Answer 1

您可以使用.each() 迭代器函数为图像的不透明度设置动画：

  $('.lookdown img').each(function() {
    $(this).delay(delay).animate({
      opacity: 1
    }, 500);
    delay += 500;
  });

https://jsfiddle.net/ow0Lu21h/

Answer 2

试试这个：

var delay = 0;
var pace = 1000;  // 1 second
  $('.lookdown img').each(function() {
    $(this).delay(delay).animate({
      opacity: 1
    }, pace);
    delay += pace;
  });

Answer 3

通过图像循环延迟动画的方法，您会遇到很多问题和极端情况，主要是因为可以选择反转动画。避免所有潜在问题的最简单方法是使用不同的动画原理：通过使用窗口间隔并不断询问当前动画方向，可以确保动画完整性。

在我的代码中，我正在处理超时，这将使您有机会在动画暂停时获得更快的轮询间隔 - 但在它运行时，它总是等待过渡完成，然后再改变方向。

var intv = function() {
  if(direction === 0) return window.setTimeout(intv, interval);
  var next = position + direction < 0 ? images.length - 1 : position + direction >= images.length ? 0 : position + direction;
  $(images[position]).fadeOut(transition);
  $(images[next]).fadeIn(transition);
  position = next;
  return window.setTimeout(intv, showtime + transition);
};

https://jsfiddle.net/jdx0zufa/

您可以通过更改 next 计算来将此代码更改为不同的行为 - 例如当它到达终点并向前跑时，将方向改为向后等。