我已经在一个div中放置了三个背景图像。我正试图让他们三个在一个淡入淡出的计时器上循环。实际上，我在这里找到了类似的问题，但我无法让它们工作。不管怎样，这是相关的代码：
超文本标记语言
<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"谢谢
尝试从cssbackground-Image值创建数组，淡入淡出第一个背景图像；从数组中删除淡出的背景图像，将删除的背景图像放在数组的最后一个索引处；重置背景图像值到由逗号；淡入，淡出下一个，现在先索引背景图像；循环淡入，淡出所有背景图像；递归调用函数，试图创建显示效果的"无限"淡入，淡出"幻灯片"
$(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>
根据这里的答案和@guest271314的建议，尝试为动画定义CSS 3关键帧：
#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%;
-moz-animation: swim 2s linear 0s infinite;
-webkit-animation: swim 2s linear 0s infinite;
animation: swim 2s linear 0s infinite;
}
@-moz-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
@-webkit-keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
@keyframes swim {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
CSS
#background-slideshow {
transition: background 1.5s ease;
background-position: center top, center top, center top;
background-size: cover, cover, cover;
background-repeat: no-repeat, no-repeat, no-repeat;
background-image: url(img/background-1.jpg), url(img/background-2.jpg), url(img/background-3.jpg);
}
JS
var i = 1;
setInterval(function() {
e = document.getElementById('background-slideshow');
switch (i) {
case 0:
e.style.backgroundPosition = 'center top, center top, center top';
break;
case 1:
e.style.backgroundPosition = window.innerWidth + 'px top, center top, center top';
break;
case 2:
e.style.backgroundPosition = window.innerWidth + 'px top, ' + window.innerWidth + 'px top, center top';
break;
}
i++;
if (i > 2) i = 0;
}, 3000);
