gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:53:56 29 4
gpt4 key购买 nike

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

如果有任何帮助,我将不胜感激。让我知道是否可以为您提供更多信息。谢谢。

*** 我试过 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”谢谢

最佳答案

尝试从 css background-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>

jsfiddle http://jsfiddle.net/gkjL6mdj/15/

关于jquery - 尝试使用 CSS 和 JQUERY 使多个背景图像在幻灯片中循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43573571/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com