Question

我想在2000ms后自动更改图像。图像应该淡入。

我的HTML：

<div class="nile-slider large-12 column">
  <img alt="landing page 3" src="assets/Startseite/Slider/Slider_2.jpg">
</div>

我的JS：

// change header image after 2 seconds
var images = ['Slider_1.jpg','Slider_2.jpg','Slider_3.jpg', 'Slider_4.jpg'],
    index = 0, // starting index
    maxImages = images.length - 1;
var timer = setInterval(function() {
    var currentImage = images[index];
    index = (index == maxImages) ? 0 : ++index;
    $('.nile-slider img').attr('src','assets/Startseite/Slider/'+currentImage).fadeIn('slow');
 }, 2000);

使用此代码，图像会发生变化但不会淡入。如何强制图像淡入（甚至淡出）？

Answer 1

您可以使用fadeOut回调函数合并fadeOut和fadeIn()来实现此目的。

// change header image after 2 seconds
var images = ['Slider_1.jpg','Slider_2.jpg','Slider_3.jpg', 'Slider_4.jpg'],
    index = 0, // starting index
    maxImages = images.length - 1;
var timer = setInterval(function() {
    var currentImage = images[index];
    index = (index == maxImages) ? 0 : ++index;
    $('.nile-slider img').fadeOut(200, function() {
        $('.nile-slider img').attr("src", 'assets/Startseite/Slider/'+currentImage);
        $('.nile-slider img').fadeIn(200);
    });
 }, 2000);

Answer 2

将新来源作为fadeOut的回调提供可以解决问题：

 $('.nile-slider img')
  .fadeOut('fast', 
           function () {
              $('.nile-slider img')
              .attr('src','assets/Startseite/Slider/'+currentImage)
              .fadeIn('slow');
           }
 );

JQuery：如何用fadeIn一次又一次地改变图像？

2 个答案: