具有多个动画/效果的JQuery滑块

Question

我正在寻找创建一个滑块，其中一个图像淡入，然后另一个淡入其中，然后幻灯片更改。到目前为止，我已经尝试过使用“wowslider”和“rhinoslider”并广泛搜索它...但是我似乎找不到可以实现此功能的滑块工具。我尝试和阅读过的每一个工具都可以实现淡入淡出效果 - 但每张幻灯片只有一个图像 - 我需要淡入两个图像[一个，然后另一个]然后更换幻灯片。

如何实现这一目标？ （使用现有的工具，如wowslider - 或者使用纯代码）

非常感谢任何建议！

Answer 1

您可以使用http://getbootstrap.com/javascript/#carousel Bootstrap Carousel插件。

它有一个滑动时间之间的事件处理程序：

$('#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，您可以编写您的淡入淡出功能。我的意思是：你在每张幻灯片下放两张图片。幻灯片完成后，faceOut显示第一个图像并淡入第二个隐藏图像。