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()替换为$(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) });。

Here's a working jsFiddle.

{{1}}

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);
});

在jQuery中淡化图像和非循环幻灯片

2 个答案: