javascript-使用jquery的幻灯片中的FadeIn()图像

我正在进行图像幻灯片放映,并且对每张图像都进行了fadeOut()功能更改,但是下一幅图像突然出现.我希望它逐渐消失.我似乎无法使其正常工作.

这是没有任何fadeIn()的代码：

HTML：

<div id="backgroundChanger">
  <img class="active" src="background1.jpg"/>
  <img src="background2.jpg"/>  
  <img src="background3.jpg"/>  

CSS：

#backgroundChanger{
 position:relative;
}
#backgroundChanger img{
 position:absolute;
 z-index:-3
}
#backgroundChanger img.active{
 z-index:-1;
}

使用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,您应该一切顺利！

标签：fadein,javascript,css,background,fadeout
来源： https://codeday.me/bug/20191009/1880500.html