jQuery中的褪色图像和非循环幻灯片

Question

我想为一个网站创建一个jquery幻灯片。我有2张图片:在网站上显示的第一张图片，我希望第一张图片逐渐消失，慢慢地揭示了第二张图片的地方第一张。我不想让这个循环。

我希望在打开网页后大约4秒开始褪色效果。如果有人能让我知道正确的编码是什么，我会很感激。(我对jquery不太熟悉。我应该将代码放在head标签还是body标签中?)

这是我的代码，然而第二个图像出现在第一个图像下面，而我实际上希望它隐藏，直到它逐渐消失到第一个位置。而且，它会循环，这是我不想要的。

jQuery:

$(document).ready(function() { 
   $('#banner img:gt(0)').hide();
    setInterval(function(){
      $('#banner :first-child').fadeOut(3000).delay(3500)
         .next('img').fadeIn(1500).delay(3500)
         .end().appendTo('#banner');}, 
      5000);
});

HTML:

<div id="banner"> 
  <img src="images/slide1.jpg" width="1024" height="300" alt="SS Image "/> 
  <img src="images/slide2.jpg" width="1024" height="300" alt="SS Image "/>
</div><!--end banner--> 

CSS:

#container #banner { 
   border-bottom-width: 2px; 
   border-bottom-style: solid; 
   border-bottom-color: #F08840; 
   position: relative; 
   z-index:1; 
} 

Answer 1

这是我的代码，然而第二个图像出现在下面第一个，实际上我想把它隐藏起来，直到它逐渐消失

这是由于新图像在旧图像完全褪色之前褪色造成的，导致它开始在第一张图像的下方。使用fadeOut()的回调函数来确定上一个图像何时完成淡出，以便您可以在下一张图像中淡出。

还有，它会循环，这是我不想要的。

如果您只希望setInterval()发生一次，则需要将其替换为setTimeout()。

这是一个工作的jsFiddle

$(document).ready(function() { 
   $('#banner img:gt(0)').hide();
    setTimeout(function(){
        $('#banner :first-child').delay('1500').fadeOut(function(){
          $(this).next('img').fadeIn(1500).delay(3500).end().appendTo('#banner');
        });               
   },3000)
});

Answer 2

你只需要第二个图像出现在第一个图像的上方http://jsfiddle.net/q7uvn/

$(document).ready(function() { 
  $('#banner img:gt(0)').hide();
    setTimeout(function(){
      var children = $('#banner').children();
      children.eq(1).fadeIn(1500); 
    },
    4000);
});