1

我正在尝试为网站创建 jquery 幻灯片。我有两张图片：第一张图片显示在网站上，我希望第一张图片淡出，慢慢地显示第二张图片代替第一张。我不希望这个循环。

我希望在打开网页后 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; 
}
4

2 回答 2

0

这是我拥有的代码，但是第二个图像出现在第一个图像下方，而我实际上希望它隐藏，直到它消失在第一个图像的位置。

这是由于在旧图像完全淡出之前新图像淡入，导致它从第一张图像下方开始。使用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)
});
于 2013-05-17T14:15:18.700 回答
0

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

$(document).ready(function() { 
  $('#banner img:gt(0)').hide();
    setTimeout(function(){
      var children = $('#banner').children();
      children.eq(1).fadeIn(1500); 
    },
    4000);
});
于 2013-05-17T14:27:40.713 回答