Question

任何人都可以帮我实现以下jQuery循环自动幻灯片。步骤如下：1。首先淡入幻灯片图像，然后淡化标题背景，最后淡化标题文本。这些附加文件是视觉示例。

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

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

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

谢谢，保罗

Answer 1

<强> About jQuery fadeIn

fadeIn有一个回调函数，在动画完成时调用。您可以使用它来开始第二个动画，如下所示：

$('#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');        

       });        
   });
});

当我评论它时，动画部分在click事件的回调函数内启动。当然，您可能不希望通过单击按钮而不是循环来启动动画。在这种情况下，您只需要中间部分。

此外，您需要修改jQuery选择器以便fadeIn正确的元素。 （可能他们没有被称为#slideshowImage左右......）

Answer 2

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

Google jQuery slideshow，找到最适合您需求的那个。

一些例子：

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

依旧......

Answer 3

这是您要搜索的插件：http://fancybox.net/
大多数画廊都是用这个完成的。查看文档，如果有些事情你不明白，请随时发表一个问题:) 欢呼声

jQuery fadein fadeout幻灯片

3 个答案: