尝试使用CSS和JQUERY在幻灯片中循环显示多个背景图像

我在一个div中放置了三个背景图像。我试图让它们在一个淡入淡出的计时器上循环。事实上，我在这里发现了类似的问题，但我无法让它们发挥作用。无论如何，以下是相关代码：

HTML

我希望在

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” 感谢您的回答和@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

背景图像

值创建数组，淡入淡出第一个背景图像；从数组中删除淡出的背景图像，将删除的背景图像放置在数组的最后一个索引中；将背景图像值重置为逗号连接的数组；淡入淡出下一个，现在是第一个索引的背景图像；循环淡入淡出所有背景图像；递归调用函数，尝试创建“无限”淡入淡出“幻灯片”的显示效果

$（函数（）{
//将`$.fx.interval`设置为`0`
$.fx.interval=0；
（功能循环框架（elem、bgimg）{
//“元素”：“幻灯片放映”`
//背景图像重置后，设置、重置、延迟至“1000”
css（“背景图像”，bgimg）
//背景图像淡入
.fadeTo（3000，1，“线性”，函数（）{
//在淡出图像前设置“延迟”
//背景图像淡入
$（此）.delay（3000，“fx”）.fadeTo（3000，0，“线性”，函数（）{
//在逗号处拆分背景图像字符串，创建数组
var img=$（this.css（“backgroundImage”）.split（“，”），
//将第一个背景图像连接到“img”数组，
//从“img”数组中删除第一个背景图像
bgimg=img.concat（img[0]）。拼接（1）。连接（“，”；
//递归调用` cycleBgImage`
循环计划（elem、bgimg）；
});
});
}("幻灯片"),；
});
正文{
宽度：400px；
高度：400px；
}
/*设置“幻灯片放映”父级背景色*/
.幻灯片放映{
背景：#000；
显示：块；
宽度：继承；
身高：继承；
}
#幻灯片放映{
宽度：100%；
身高：100%；
显示：块；
不透明度：0.0；
背景色：#000；
/* 
在此处将背景图像设置为`url（/path/to/image）`，
以逗号分隔
*/
背景图像：url（“http://lorempixel.com/400/400/cats/?1"), 
网址（“http://lorempixel.com/400/400/animals/?2"), 
网址（“http://lorempixel.com/400/400/nature/?3"), 
网址（“http://lorempixel.com/400/400/technics/?4"), 
网址（“http://lorempixel.com/400/400/city/?5");
背景尺寸：封面，0px，0px，0px；
/*将转换设置为3000ms
-webkit过渡：背景图像3000ms线性；
-moz过渡：背景图像3000ms线性；
-ms过渡：背景图像3000ms线性；
-o过渡：背景图像3000ms线性；
过渡：背景图像3000ms线性；
*/
}

CSS

#背景幻灯片{
过渡：背景1.5s轻松；
背景位置：中顶、中顶、中顶；
背景尺寸：封面，封面，封面；
背景重复：不重复，不重复，不重复；
背景图片：url（img/background-1.jpg）、url（img/background-2.jpg）、url（img/background-3.jpg）；
}

JS

var i=1；
setInterval（函数（）{
e=document.getElementById（'background-slideshow'）；
开关（一）{
案例0：
e、 style.backgroundPosition='中间顶，中间顶，中间顶'；
打破
案例1：
e、 style.backgroundPosition=window.innerWidth+'px-top，center-top，center-top'；
打破
案例2：
e、 style.backgroundPosition=window.innerWidth+'px-top'，+window.innerWidth+'px-top，center-top'；
打破
}
i++；
如果（i>2）i=0；
}, 3000);
是否尝试使用
css
动画？另见，谢谢。我试过css动画，但没用。见编辑^^^^非常感谢。我把它复制了一遍，在chrome上试过，但没用。仍然只显示第一个image@TJKeel.. 检查，链接扫描你提供了一个所有图像宽度的小提琴，并解释了你想要它的确切方式？？我刚刚编辑了原始帖子来展示我是如何制作css动画的，但它仍然不起作用。我们的目标是在定时器上以全宽度循环显示3幅图像。css动画看起来是个不错的主意，但我无法让它发挥作用。谢谢，效果很好！我在更改每个图像在转换之前停留的时间时遇到问题？在图像转换之间没有停顿。我把所有的号码都改了，但还是没法改。谢谢，我认为过渡段不起作用。它们都设置为3000，但即使更改它们，也不会发生任何变化。@TJKeel
js
，
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");}
}

#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; }
}