jquery - 如何使用 fadin 更改图像源的效果

Question

$('#main').attr("src", src).load(function() {
  $('#main').fadeIn(2000);              

});

我想用另一个改变图像，但不想先使用淡出然后淡入。我不想消失第一个图像然后显示另一个。需要在第一个存在时更改图像。

Answer 1

我知道如何用一张图片来做，但如果你创建另一个 img 标签，你就可以做到。

您需要以下基本 html：

<div id="cycler">
    <img class="active" src="image1.jpg" alt="My image" />
    <img src="image2.jpg" alt="My image" />     
</div>

这是必要的 css——只是为了显示 z-index 和定位——你需要根据需要添加更多的位置。根据您的布局，您可能还需要在#cycler 上设置高度和宽度以匹配您的图像：

#cycler{position:relative;}
#cycler img{position:absolute;z-index:1}
#cycler img.active{z-index:3}

这是javascript：

function cycleImages(){
  var $active = $('#cycler .active');
  var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
  $next.css('z-index',2);//move the next image up the pile
  $active.fadeOut(1500,function(){//fade out the top image
  $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
      $next.css('z-index',3).addClass('active');//make the next image the top one
  });
}