jquery - 使用 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>

所有图像都被隐藏，无论是 display:none; 或 - 不透明度：0；

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

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

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

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

2个重要的事情：

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

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

将不胜感激任何帮助

标签： jqueryanimationreverse

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

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

https://jsfiddle.net/ow0Lu21h/

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

问题描述

解决方案

推荐阅读