javascript - 具有多个动画/效果的 JQuery slider

Question

我想创建一个 slider ，其中一张图片淡入，然后另一张图片在其旁边淡入，然后幻灯片发生变化。到目前为止，我已经尝试使用“wowslider”和“rhinoslider”并在谷歌上进行了大量搜索……但是我似乎无法找到可以完成此操作的 slider 工具。我尝试过和阅读过的每一种工具都允许淡入淡出效果——但每张幻灯片只适用于一张图像——我需要淡入两张图像[一张，然后另一张]，然后更换幻灯片。

如何实现？ (使用现有工具，如 wowslider - 或者可能使用纯代码)

非常感谢任何建议!

Answer 1

你可以使用 http://getbootstrap.com/javascript/#carousel Bootstrap 轮播插件。

它有一个幻灯片时间之间的事件处理程序:

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
  // This event fires immediately when the slide instance method is invoked.
})

或

$('#myCarousel').on('slid.bs.carousel', function () {
 // do something…
 // This event is fired when the carousel has completed its slide transition.
})

你可以使用第二个而不是 //do something 你可以写你的 fade 函数。我的意思是:你在每张幻灯片下面放了两张图片。幻灯片完成后，faceOut 第一个显示的图像和 fadeIn 第二个隐藏的图像。