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

我有一个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>

所有图像均隐藏，显示方式为：无；or-不透明度：0

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

运行动画
向后运行动画

点击“运行动画”后，我想循环浏览所有图像，从第一张开始，移动到第二张，显示下一张照片。 基本上，它将显示“一帧一帧”的动画，我可以控制速度

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

两件重要的事情：

• 我需要它是动态的，这样我就可以添加/删除图像
• 我需要控制每个图像之间的秒数/毫秒

我制作了一把小提琴：

---

非常感谢您的帮助

您可以使用

设置图像不透明度的动画。each（）

迭代器函数：

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

试试这个：

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

---

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

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

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);
};

var intv=function（）{
if（direction==0）返回window.setTimeout（intv，interval）；
var next=位置+方向<0？images.length-1:位置+方向>=images.length？0:位置+方向；
$（图像[位置]）。淡出（过渡）；
$（图像[next]）.fadeIn（转换）；
位置=下一个；
返回窗口。设置超时（intv、showtime+转换）；
};

---

您只需更改

下一步

计算，即可将此代码更改为不同的行为-例如，当它到达终点并向前运行时，将方向更改为向后等。

嘿@gil hamer，感谢您为我们设置测验。但是如果你能帮我们添加到目前为止你已经尝试过的代码，那就容易多了。在fiddle中，你没有提供太多的代码，似乎到目前为止你还没有尝试过任何东西。。还有，动态是什么意思，您可以在运行时随时更改幻灯片中的图像？@wiesion I更新了小提琴。请检查一下，这几乎正是我需要的。无论如何，如何避免第一次点击时的延迟？这是一个非常有趣的方法。是否可以使其不循环并避免不透明度效果？这意味着它看起来更像是“显示”和“隐藏”的逐帧动画？谢谢从这里开始，自己做这些更改应该不会那么困难

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);
};