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

Question

我正在寻找创建一个滑块，在其中一个图像逐渐淡入，然后在另一个图像旁边逐渐淡入，然后幻灯片发生变化。 到目前为止，我已经尝试使用“ wowslider”和“ rhinoslider”并在Google上进行了广泛的搜索...但是，我似乎找不到能够实现此目标的滑块工具。 我尝试过并阅读过的每种工具都允许淡入淡出效果-但每张幻灯片只包含一张图片-我需要淡入两张图片[先是，然后是另一张]，然后再更改幻灯片。

如何做到这一点？ （使用现有的工具（例如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 ，而可以编写淡入淡出函数。 我的意思是：您在每张幻灯片下放置了两个图像。 滑动完成后，将第一个显示的图像朝向正面，然后将第二个隐藏的图像逐渐淡出。