试图让多个背景图像循环通过CSS和JQUERY的幻灯片

我已经在一个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 ; 我没有太多的经验，但没关系。

我真的很感激任何帮助。 让我知道，如果我可以给你任何更多的信息。 谢谢。

***我试过cssanimation，但没有得到结果。 以下是我将其更改为：

 #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值创build数组，淡入淡出第一个背景图像; 从数组中删除淡出的背景图像，将删除的背景图像放在数组的最后一个索引处; 将背景图像值重置为以逗号连接的数组; 淡入，淡出，现在先索引背景图像; 通过衰减循环，淡出所有背景图像; recursion调用函数，尝试创build“无限”淡入淡出效果，淡出“幻灯片放映”

 $(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> 

Answer 2

从这里的答案和来自@ guest271314的build议尝试为animation定义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; } }