试图通过使用CSS和jQuery的幻灯片，使多背景图片循环 [英] Trying to make multiple background images cycle through a slideshow with CSS and JQUERY
问题描述
我已经放在三种背景图片在一个div。我试图让他们三个循环上淡入和淡出的计时器。其实我已经发现这里类似quesitons，但我不能让他们的工作。总之，这里的相关code：
HTML
＆LT; DIV ID =幻灯片＆GT;
＆LT; / DIV＆GT;
CSS
#slideshow {
位置：相对;
顶部：0;
宽度：100％;
高度：635px;
背景：
URL（car4.jpg），
URL（city.jpg），
URL（host3.jpg）;
背景重复：不重复;
背景尺寸：100％;
}
我希望能做到这一点的 CSS ，但我猜它需要 JQUERY ;我没有在太多的经验。不过没关系。
我真的AP preciate任何帮助。让我知道如果我可以给你更多的信息。谢谢你。
***我已经试过CSS动画，但我没有得到的结果。下面是我把它改为：
#slideshow {
位置：相对;
顶部：0;
宽度：100％;
高度：635px;
背景：网址（car4.jpg）;
背景重复：不重复;
背景尺寸：100％;
动画名称：之一;
动画持续时间：4秒
}
@keyframes有一个{
从{背景：网址（car4.jpg）;}
为{背景：网址（city.jpg）;}
}
这看起来是正确的，但它仍然只显示原始图像car4.jpg
谢谢
尝试从 CSS 背景图像创建阵列值，淡入，淡出第一背景图片;从数组删除淡出的背景图像，将删除背景图片数组的最后一个索引;重置背景图片的价值阵列用逗号连接;淡入，淡出接下来，现在先收录背景图片;通过淡入，淡出所有背景图片循环;递归调用功能，试图打造的无限显示效果淡入，淡出幻灯片
$（函数（）{\r
//在`0`设置`$ .fx.interval`\r
$ .fx.interval = 0;\r
（函数cycleBgImage（ELEM，bgimg）{\r
//`elem`：`＃slideshow`\r
//设置，复位，延迟`1000`后的背景图像复位\r
elem.css（和backgroundImage，bgimg）\r
//淡入背景图片\r
.fadeTo（3000，1，线性，函数（）{\r
// fadeing出图像之前设置`delay`\r
//淡入背景图片\r
$（本）.delay（3000，FX）。fadeTo（3000，0，线性，函数（）{\r
以逗号分割//背景图片的字符串，创建数组\r
VAR IMG = $（本）的.css（和backgroundImage）。分裂（），\r
// CONCAT第一背景图像`img`阵列，\r
//从`img`数组中删除第一个背景图片\r
bgimg = img.concat（IMG [0]）拼接（1）。加入（，）;\r
//递归调用`cycleBgImage`\r
cycleBgImage（ELEM，bgimg）;\r
}）;\r
}）;\r
}（$（＃幻灯片）））;\r
}）; \r
{体\r
宽度：400像素;\r
高度：400像素;\r
}\r
/ *设置`＃slideshow`母公司背景色* /\r
.slideshow {\r
背景：＃000;\r
显示：块;\r
宽度：继承;\r
高度：继承;\r
}\r
#slideshow {\r
宽度：100％;\r
高度：100％;\r
显示：块;\r
不透明度：0.0;\r
背景颜色：＃000;\r
/ *\r
设置背景图片为'网址（/路径/到/图片）`这里，\r
用逗号分隔\r
* /\r
背景图像：网址（http://lorempixel.com/400/400/cats/?1），\r
URL（http://lorempixel.com/400/400/animals/?2），\r
URL（http://lorempixel.com/400/400/nature/?3），\r
URL（http://lorempixel.com/400/400/technics/?4），\r
URL（http://lorempixel.com/400/400/city/?5）;\r
背景大小：盖，0像素，0像素，0像素;\r
在3000ms / *设置transtitions\r
-webkit-转型：背景图片3000ms线性;\r
-moz-转型：背景图片3000ms线性;\r
-ms过渡：背景图片3000ms线性;\r
-o过渡：背景图片3000ms线性;\r
过渡：背景图像3000ms线性;\r
* /\r
} \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/1.11.1/jquery.min.js\">\r
＆LT; / SCRIPT＆GT;\r
＆LT; DIV CLASS =幻灯片＆GT;\r
＆LT; DIV ID =幻灯片＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT; \r
I've placed three background images in a div. I'm trying to make all three of them cycle through on a timer that fades in and out. I've actually found similar quesitons on here, but I cannot get them to work. Anyway, here's the relevant code:
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%;
}
I'm hoping to do this in CSS, but I'm guessing it requires JQUERY; which I don't have much experience in. But that's OK.
I'd really appreciate any help. Let me know if I can give you any more information. Thank you.
*** I've tried css animations but I didn't get the results. Here's what I changed it to:
#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");}
}
This looks correct, but it still only showing the original image "car4.jpg" Thanks
Try creating array from css background-image value , fading in , fading out first background image ; removing faded out background image from array , placing removed background image at last index of array ; resetting background image value to array joined by comma; fading in , fading out next , now first indexed background image ; cycling through fading in , fading out all background images ; recursively calling function , to attempt to create displayed effect of an "infinite" fade in , fade out "slideshow"
$(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>
jsfiddle http://jsfiddle.net/gkjL6mdj/15/
这篇关于试图通过使用CSS和jQuery的幻灯片，使多背景图片循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
