幻灯片缺少Javascript动画

Question

我找到了这个漂亮的网站（http://soworldwide.org/），并希望创建一个类似的幻灯片。在我花了很多时间让它发挥作用之后，我仍然无法理解它。

现在它看起来像这样：

http://bit.ly/1bktxcx

等待最后一张照片，然后您就可以看到幻灯片放映是如何刷新的。有人可以帮助我，所以我得到了与他们相同的动画吗？

顺便说一下，我正在使用相同的Jquery插件。

提前谢谢你。

Answer 1

您在列表结束图像的动画启动的同时，将列表开始图像的顶部设置为零。由于列表开始图像的zIndex为3，因此您将导致列表开始图像隐藏列表结束图像的动画。我建议您在动画时动态更新每个图像的zIndex。对于隐藏的幻灯片（通过将顶部设置为负值，正如您正在做的那样），您可以忽略zIndex。但在为next图片设置顶部为零之前，请将curr的zIndex设置为1，将next的zIndex设置为0.

编辑 我使用Chrome JS调试器并自由使用console.log()来解决这个问题。也许你做了所有正确的事情，仍然无法找到问题，只需要第二眼。但如果你没有做正确的事情，请记住：调试器是一个强大的工具。