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++]+")");

＆＃13;

$(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);

});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的问题是您要呈现两次相同的图像。您没有注意到，但如果您增加时间，其他图像会做同样的事情。解决方案创建时间变量。使用此变量在加载图像时等待时间为0，然后更改为500。

$(document).ready(function(){
  var i=0;
  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(i, function(){
      i=500;
      image.css("background-image","url("+images[count++]+")");
      image.fadeIn(i);
    });
    if(count == images.length)
    {
      count = 0;
    }
  },5000);

});

＆＃13;

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

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 3

这是更短的版本。使用css将第一张图像设置为默认背景图像并更改images。

的索引

$(document).ready(function(){
  var count = 0;
  var images = [
                "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",
                "http://kingofwallpapers.com/fantasy/fantasy-005.jpg"];
                
  var image = $(".fader");
  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: 50%;
  width: 50%;
  left:0;
  top:0;
  z-index: -99;
  background-image: url("http://kingofwallpapers.com/fantasy/fantasy-005.jpg");
}

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

基本的JQuery推子

3 个答案: