Question

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

}）;

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

Answer 1

Idk如何使用一张图片，但如果您创建另一个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
  });
}

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

1 个答案: