jQuery 淡入淡出幻灯片

发布于 2025-01-04 04:27:59 字数 301 浏览 0 评论 0原文

谁能帮我实现以下 jQuery 循环自动幻灯片。步骤如下: 1.首先淡入幻灯片图像,然后淡入标题背景,最后淡入标题文本。这里的附件是视觉示例。

http://www.markupxpert.com/slideshow/step1.jpg

http://www.markupxpert.com/slideshow/step2.jpg

http:// /www.markupxpert.com/slideshow/step3.jpg

谢谢,保罗

Can anyone help me to implement the following jQuery looped auto slideshow. The steps are as follows: 1.First fadeIn the slideshow image and after that fadein the caption background and lastly fadeIn the caption text.Here the Attached files are the visual example.

http://www.markupxpert.com/slideshow/step1.jpg

http://www.markupxpert.com/slideshow/step2.jpg

http://www.markupxpert.com/slideshow/step3.jpg

Thanks, Paul

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

送舟行 2025-01-11 04:27:59

关于 jQuery fadeIn

fadeIn< /code> 有一个回调函数,当动画完成时调用该函数。您可以使用它来启动第二个动画,如下所示:

$('#clickme').click(function() {

   // 1st anim starts here
   $('#slideshowImage').fadeIn('slow', function() {

       // 1st anim ended, 2nd starts here     
       $('#captionBackground').fadeIn('slow', function() {

         // 2nd anim ended, 3rd stars here
          $('#captionText').fadeIn('slow');        

       });        
   });
});

正如我注释掉的那样,动画部分在单击事件的回调函数中启动。当然,您可能不想通过单击按钮来启动动画,而不是循环启动动画。在这种情况下,您只需要中间部分。

另外,您需要修改 jQuery 选择器才能淡入正确的元素。 (可能它们不叫#slideshowImage 之类的...)

About jQuery fadeIn

fadeIn has a callback function which is called when the animation is complete. You can use it to start your second animation as belows:

$('#clickme').click(function() {

   // 1st anim starts here
   $('#slideshowImage').fadeIn('slow', function() {

       // 1st anim ended, 2nd starts here     
       $('#captionBackground').fadeIn('slow', function() {

         // 2nd anim ended, 3rd stars here
          $('#captionText').fadeIn('slow');        

       });        
   });
});

The animation part starts within the click event's callback function as I commented it out. Of course you probably don't want to start the animation by clicking on a button but rather than in a loop. In this case you only need the middle part.

Also, you need to modify the jQuery selectors in order to fadeIn the proper elements. (Probably they're not called #slideshowImage or so...)

朕就是辣么酷 2025-01-11 04:27:59

我建议你不要实施这种行为。有许多 jQuery 幻灯片可供您根据需要使用或修改。

Google 搜索 jQuery 幻灯片 并找到最适合您需求的幻灯片。

一些示例:

25 个 jQuery 图片库/滑块教程和插件

33 个强大的 jQuery 幻灯片(滑块)插件和教程

23 个最佳 jQuery 幻灯片(图库)插件

21 个出色的 jQuery 图片库/幻灯片插件

20 个最佳 jQuery 幻灯片/照片库插件

等等...

I suggest you not to implement that behaviour. There are dozens of jQuery slideshows out there you can use or modify as you want.

Google for jQuery slideshow and find the one that best suits your needs.

Some examples:

25 jQuery Image Gallery/Slider Tutorials and Plugins

33 Powerful jQuery Slideshow (Sliders) Plugins and Tutorials

23 Best jQuery Slideshow (Gallery) Plugins

21 Brilliant jQuery Image Gallery/Slideshow Plugins

20 Best jQuery Slideshow / Photo Gallery Plugins

and so on...

故事与诗 2025-01-11 04:27:59

这是您正在搜索的插件:http://fancybox.net/
大多数画廊都已经完成了。查看文档,如果有一些您不明白的地方,请随时发布相关问题:)
干杯

This is the plugin you are searching for: http://fancybox.net/
Most of the galleries are done with that. Check out the documentation and if there are some things you don't understand feel free to post a question about it :)
cheers

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文