Javascript 使用jquery在幻灯片中显示FadeIn（）图像

我正在制作一个图像幻灯片，并且

fadeOut（）

功能可以处理每一个图像更改，但是下一个图像会突然出现。我想让它淡入淡出。我似乎无法让它工作

这是没有任何

fadeIn（）的代码。

：

HTML:

Javascript:

function cycleImages(){
      var $active = $('#backgroundChanger .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#backgroundChanger img:first');
      $next.css('z-index',-2);
      $active.fadeOut(1500,function(){
      $active.css('z-index',-3).show().removeClass('active');
          $next.css('z-index',-1).addClass('active');
      });
    }

$(document).ready(function(){
 setInterval('cycleImages()', 7000);
})

---

对于间隔函数，我推荐如下内容：

window.setInterval(function (){
  var images = $('#backgroundChanger img');
  var active, next;

  images.each(function(index, img) {
    if($(img).hasClass('active')) {
      active = index;
      next = (index === images.length - 1) ? 0 : index + 1;
    }
  });

  $(images[active]).fadeOut(1000, function() {
    $(images[next]).fadeIn(1000);
  });

  $(images[next]).addClass('active');
  $(images[active]).removeClass('active');
}, 3000);

这就是css所需的全部内容：

#backgroundChanger img:first-child {
  display: block;
}

#backgroundChanger img {
  display: none;
}

并保持相同的HTML，你应该很好去

您可以在的回调中创建下一个图像，如下所示：

$（窗口）.load（函数（）{
变量$slider=$（“#背景变换器”），
$slides=$slider.find（“img”），
$firstSlide=$slides.first（）；
函数cycleImages（）{
var$active=$（“#backgroundChanger.active”），
$next=（$active.next（）.length>0）？$active.next（）：$firstSlide；
$active.fadeOut（1000，函数（）{
$active.removeClass（'active'）；
$next.fadeIn（1000）.addClass（'active'）；
});
}
设置间隔（周期图像，3000）；
})

#背景变换器img{
位置：绝对位置；
宽度：150px；
高度：100px；
}

---

这是一个与此相同但代码较短的示例。

window.setInterval(function (){
  var images = $('#backgroundChanger img');
  var active, next;

  images.each(function(index, img) {
    if($(img).hasClass('active')) {
      active = index;
      next = (index === images.length - 1) ? 0 : index + 1;
    }
  });

  $(images[active]).fadeOut(1000, function() {
    $(images[next]).fadeIn(1000);
  });

  $(images[next]).addClass('active');
  $(images[active]).removeClass('active');
}, 3000);

#backgroundChanger img:first-child {
  display: block;
}

#backgroundChanger img {
  display: none;
}