当幻灯片转换到下一张幻灯片时，如何为图像设置动画

Question

我正在使用jQuery Cycle Plugin。

这些是插件提供的选项。 http://jquery.malsup.com/cycle/options.html

我有5张不同的幻灯片。但每张幻灯片在幻灯片内部有两到三张图像，应该在幻灯片内的不同位置制作动画，我该如何实现这一目标？ 或者是否有另一个jQuery插件可以让你这样做？

例如。 我有一张有汽车，云和太阳的幻灯片。因此，当用户悬停或到达此幻灯片时。汽车将动画到中心，然后云和太阳将在汽车动画后动画和定位自己。

Answer 1

你需要一个视差滑块。 Here你可以看到一个例子。

Answer 2

Parallax可能是一个潜在的解决方案，但我会更多地关注Cycle提供的选项。

看一下这个例子：http://jquery.malsup.com/cycle/int2.html

在幻灯片回调之前和之后提到底部。所以从理论上讲，你可以调用一个函数来动画所有东西到位，然后当下一张幻灯片进来时，为下一张幻灯片调用下一个动画（如果有的话）。

如果您的滑块在计时器上，这可能会很麻烦。请记住这一点。

Answer 3

你可以做几件事。你可以做到这一点，当鼠标悬停在图像上时，它会变成一个自动动画的gif。

.background:hover {
background-image: url('<filepath>/animate.gif');
}

或者你可以做一个jQuery事件，当点击按钮时，或当鼠标悬停时（在我看来有点棘手），每个单独的元素（单个图像分层在顶部，可能通过z-index）动画并滑过。

如果您使用的是jQuery插件，我会推荐第一个选项。