javascript - 基本 JQuery 推子

Question

我在 JQuery 中创建了这个简单的推子，

它运行良好，只是第一个图像褪色两次，我该如何解决这个问题？这是代码:

$(document).ready(function(){

  var count = 0;
  var images = ["http://kingofwallpapers.com/fantasy/fantasy-005.jpg",
                "https://s-media-cache-ak0.pinimg.com/originals/57/48/b0/5748b075637cb4e085d5d1d1b5990624.jpg",
                "http://www.mrwallpaper.com/wallpapers/Fantasy-City.jpg",
                "https://galeri14.uludagsozluk.com/855/kad%C4%B1n_1271171.jpg"];
  var image = $(".fader");

  image.css("background-image","url("+images[count]+")");

  setInterval(function(){
    image.fadeOut(500, function(){
      image.css("background-image","url("+images[count++]+")");
      image.fadeIn(500);
    });
    if(count == images.length)
    {
      count = 0;
    }
  },5000);

});

.fader {
  position: absolute;
  height: 100%;
  width: 100%;
  left:0;
  top:0;
  z-index: -99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fader"></div>

Answer 1

替换

  image.css("background-image","url("+images[count]+")");

与

  image.css("background-image","url("+images[count++]+")");

$(document).ready(function(){

  var count = 0;
  var images = ["http://kingofwallpapers.com/fantasy/fantasy-005.jpg",
                "https://s-media-cache-ak0.pinimg.com/originals/57/48/b0/5748b075637cb4e085d5d1d1b5990624.jpg",
                "http://www.mrwallpaper.com/wallpapers/Fantasy-City.jpg",
                "https://galeri14.uludagsozluk.com/855/kad%C4%B1n_1271171.jpg"];
  var image = $(".fader");

  image.css("background-image","url("+images[count++]+")");

  setInterval(function(){
    image.fadeOut(500, function(){
      image.css("background-image","url("+images[count++]+")");
      image.fadeIn(500);
    });
    if(count == images.length)
    {
      count = 0;
    }
  },5000);

});

.fader {
  position: absolute;
  height: 100%;
  width: 100%;
  left:0;
  top:0;
  z-index: -99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fader"></div>