javascript - 背景幻灯片 - 在淡入/淡出之间暂停？

Question

我有一个工作背景幻灯片，但在淡入效果完成后图像立即开始淡出。我希望图片之间有一个间隙，使它们不会淡入或淡出。这是我的代码:

HTML:

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

CSS:

.slideshow {
background: #000;
display:block;
width:inherit;
height:inherit;
}
#slideshow {
width: 100%;
height: 100%;
display: block;
opacity: 0.0;
background-color: #000;
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;
-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;
}

这是我的js:

$(function() {
$.fx.interval = -6000;
(function cycleBgImage(elem, bgimg) {
elem.css("backgroundImage", bgimg).delay(1000, "fx")
.fadeTo(3000, 1, "linear", function() {
$(this).fadeTo(3000, 0, "linear", function() {
var img = $(this).css("backgroundImage").split(","),
bgimg = img.concat(img[0]).splice(1).join(",");
cycleBgImage(elem, bgimg);
    });
  });
}($("#slideshow")));
});

任何有关在图像之间设置停止时间的帮助将不胜感激。谢谢

Answer 1

更改延迟:elem.css("backgroundImage", bgimg).delay(1000, "fx")

示例；将1000更改为3000，则图像将停留3秒