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

Posted 2023-03-13

【中文标题】具有多个动画/效果的 JQuery 滑块

【英文标题】：JQuery Slider With Multiple Animations/Effects

【发布时间】：2014-04-09 20:29:45

【问题描述】：

我正在寻找一个滑块，其中一个图像淡入，然后另一个图像在它旁边淡入，然后幻灯片发生变化。到目前为止，我已经尝试使用“wowslider”和“rhinoslider”并广泛搜索它......但是我似乎找不到可以完成此操作的滑块工具。我尝试和阅读的每个工具都允许淡入效果 - 但每张幻灯片仅适用于一张图像 - 我需要淡入两张图像 [一个，然后另一个] 然后更改幻灯片。

这如何实现？ （使用现有的工具，例如 wowslider - 或者可能使用纯代码）

非常感谢任何建议！

【参考方案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，您可以编写您的淡入淡出函数。我的意思是：你在每张幻灯片下放两张图片。幻灯片完成后，将第一个显示的图像面朝外，并淡入第二个隐藏的图像。