每张幻灯片中的 Jquery 循环和效果
我想使用 Cycle 创建一个具有以下效果的轮播:
- 当用户单击上一页/下一页按钮时,幻灯片淡入或幻灯片
- 幻灯片完成加载后,每张幻灯片中都有我想要为其设置动画的文本和图像滑入或淡出效果。
问题: 1. 如何才能做到平滑过渡(就像 Flash 幻灯片一样)?我考虑过隐藏文本/图像并在调用“after”函数时对它们进行动画处理。
- 当使用到页面时,我将如何对第一张幻灯片上的文本进行动画处理。当您浏览每个页面时,循环动画每个页面。
提前致谢。
文森特
I want to create a carousel using Cycle with the following effects:
- The slides fade in or slides when user clicks a prev/next button
- When the slide finishes loading, there are text and images in each slide that I want to animate as well with a slide in or fade in effect.
Questions:
1. How could one do it so that the transitions are smooth (like that of a flash slideshow)? I thought about hiding the text/images and animating them when the "after" function is called.
- And how would I animate the text on the first slide when the use comes to the page. Cycle animates each page when you navigate through them.
Thanks in advance.
Vincent
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
保持过渡平滑需要在幻灯片的复杂性、渲染页面的 JavaScript 解释器的效率以及客户端的处理能力之间取得平衡。您唯一可以控制的部分是幻灯片的复杂性:最小化图形和动画。当幻灯片离开视图时停止运行动画,并开始播放刚刚进入视图的幻灯片的动画,以最大限度地减少处理负载。
以下是如何使用 before: 和 after: 的示例:回调来触发特定于幻灯片的事件和其他插件:
Keeping the transitions smooth is a balance between the complexity of the slide, the efficiency of the javascript interpreter rendering the page, and the processing power of the client. They only part you can control is the complexity of the slide: minimize graphics and animation. Stop running animations when a slide is leaving view, and begin animation of the slide that just enters view to minimize the processing load.
Here is an example of how to use the before: and after: callbacks to trigger slide-specific events and other plugins: