使用jquery在幻灯片中淡入淡出（）图像答案

【问题标题】：FadeIn() images in slideshow using jquery使用jquery在幻灯片中淡入淡出（）图像
【发布时间】：2014-03-15 21:58:42
【问题描述】：

我正在制作图像幻灯片，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);
})

【问题讨论】：

这是一个相同但代码更短的示例。 snook.ca/archives/javascript/simplest-jquery-slideshow

标签： javascript css background fadein fadeout

【解决方案1】：

我会为你的区间函数推荐这样的东西：

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

【讨论】：

【解决方案2】：

你可以在fadeOut()的回调中fadeIn()下一张图片如下图：

$(window).load(function() {
  var $slider = $("#backgroundChanger"),
    $slides = $slider.find("img"),
    $firstSlide = $slides.first();

  function cycleImages() {
    var $active = $('#backgroundChanger .active'),
      $next = ($active.next().length > 0) ? $active.next() : $firstSlide;
    $active.fadeOut(1000, function() {
      $active.removeClass('active');
      $next.fadeIn(1000).addClass('active');
    });
  }

  setInterval(cycleImages, 3000);
})

#backgroundChanger img {
  position: absolute;
  width: 150px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backgroundChanger">
  <img class="active" src="http://i46.tinypic.com/2epim8j.jpg" />
  <img src="http://i49.tinypic.com/28vepvr.jpg" />
  <img src="http://i50.tinypic.com/f0ud01.jpg" />
</div>

注意事项：

由于我们正在处理图像，因此最好使用load() 处理程序而不是ready() 来确保幻灯片在图像加载后开始播放
您可以通过缓存频繁访问的元素来稍微提高性能
您根本不必使用z-index 属性，因为fadeIn() 和fadeOut() 都会更改元素`display 属性本身

【讨论】：