尝试使用CSS和JQUERY循环播放幻灯片中的多个背景图像

Question

我在div中放置了三个背景图像。我试图使它们全部在一个淡入淡出的计时器上循环。我实际上在这里找到了类似的问题，但是我无法使它们起作用。无论如何，这是相关代码：

的HTML

<div id="slideshow">    
</div>

的CSS

#slideshow{
position:relative;
top:0;
width:100%;
height:635px;
background:
    url("car4.jpg"),
    url("city.jpg"),
    url("host3.jpg");
background-repeat:no-repeat;
background-size:100%;
}

我希望这样做CSS，但是我想这是必要的JQUERY; 我没有很多经验。但是没关系。

我真的很感谢您的帮助。让我知道是否能给您更多信息。谢谢。

***我尝试了CSS动画，但没有得到结果。这是我将其更改为：

#slideshow{
   position:relative;
   top:0;
   width:100%;
   height:635px;
   background:url("car4.jpg");
   background-repeat:no-repeat;
   background-size:100%;
   animation-name: one;
   animation-duration: 4s;
}
@keyframes one {
from {background: url("car4.jpg");}
to {background: url("city.jpg");}
}

这看起来是正确的，但是它仍然只显示原始图像“ car4.jpg”。谢谢

Answer 1

尝试从css background-image值创建数组，淡入，淡出第一背景图像;
从数组中删除褪色的背景图像，将删除的背景图像放置在数组的最后一个索引处; 将背景图像值重置为以逗号连接的数组；淡入，淡出，现在首先索引背景图像;
循环淡入，淡出所有背景图像; 递归调用function，以尝试创建“无限”淡入，淡出“ slideshow”的显示效果

$(function() {

  // set `$.fx.interval` at `0`

  $.fx.interval = 0;

  (function cycleBgImage(elem, bgimg) {

// `elem`:`#slideshow`

// set, reset, delay to `1000` after background image reset

elem.css("backgroundImage", bgimg)

  // fade in background image

  .fadeTo(3000, 1, "linear", function() {

    // set `delay` before fadeing out image

    // fade in background image

    $(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() {

      // split background image string at comma , creating array

      var img = $(this).css("backgroundImage").split(","),

        // concat first background image to `img` array,

        // remove first background image from `img` array

        bgimg = img.concat(img[0]).splice(1).join(",");

      // recursively call `cycleBgImage`

      cycleBgImage(elem, bgimg);

    });

  });

  }($("#slideshow")));

});


body {

  width: 400px;

  height: 400px;

}

/* set `#slideshow` parent background color */

.slideshow {

  background: #000;

  display:block;

  width:inherit;

  height:inherit;

}

#slideshow {

  width: 100%;

  height: 100%;

  display: block;

  opacity: 0.0;

  background-color: #000;

  /*

     set background images as `url(/path/to/image)` here,

     separated by commas

  */

  background-image: url("http://lorempixel.com/400/400/cats/?1"),

    url("http://lorempixel.com/400/400/animals/?2"),

    url("http://lorempixel.com/400/400/nature/?3"),

    url("http://lorempixel.com/400/400/technics/?4"),

    url("http://lorempixel.com/400/400/city/?5");

  background-size: cover, 0px, 0px, 0px;

/* set transtitions at 3000ms

  -webkit-transition: background-image 3000ms linear;

  -moz-transition: background-image 3000ms linear;

  -ms-transition: background-image 3000ms linear;

  -o-transition: background-image 3000ms linear;

  transition: background-image 3000ms linear;

    */

}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

</script>

<div class="slideshow">

  <div id="slideshow"></div>

</div>