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”）

实施例;在 3000 中更改 1000 ，然后图片将保留3秒

背景幻灯片 - 在fadein / out之间暂停？

1 个答案: