使用引导文本轮播淡入和淡出背景

Question

我有三个背景图像，我想以 5 秒的间隔淡入淡出。 我还利用本机引导轮播组件以 5 秒的间隔滑入和滑出文本，以匹配和重合不断变化和褪色的背景图像。

设想

• 问题 1：第一个背景图片将是页面加载时的默认背景图片。 5 秒后，第二个背景图像消失，这也与轮播滑到第二个文本的时间一致。 又过了 5 秒，第三张背景图像淡入淡出，轮播图滑动到下一个文本。

• 问题 2：bootstrap carousel 组件有一个指示器，当点击它时，它会切换并滑动到该 carousel 部分中的文本。 我希望在单击轮播指示器时更改背景图像。 也就是说，如果单击轮播指示器 1，背景图像应淡入第一个背景图像。 这应该适用于第二个和第三个轮播指示器及其各自的背景图像。 如果背景图像当前是活动的轮播项目和背景图像，则背景图像不应更改并淡化为单击的图像。

现状

• 我已经能够使用 jquery 和我在 stackoverflow 中得到的解决方案来实现带有淡入淡出效果的背景图像。 我还使用带有选项 (data-interval="5000") 的 bootstrap carousel 组件完成了文本轮播，该选项将切换时间设置为 5 秒以匹配背景图像淡入淡出的相同时间间隔，但仍然存在明显的小延迟。 如何消除明显的延迟？

• 图像有时会在褪色前闪烁。 有没有更好更合适的方法来实现不闪图的淡入淡出效果？

• 即使我在单击时运行该功能，单击轮播指示器也不会切换背景图像并将背景图像淡化到下一个。 如何以正确的方式实现？

这是我尝试过的：

 var bgImageArray = ["1_ozdgvm.jpg", "2_vjtjfy.jpg", "3_oxpdx2.jpg"], base = "https://res.cloudinary.com/iolamide/image/upload/v1604569872/home_banner_", secs = 5; bgImageArray.forEach(function(img) { new Image().src = base + img; // caches images, avoiding white flash between background replacements }); function backgroundSequence() { window.clearTimeout(); var k = 0; for (i = 0; i < bgImageArray.length; i++) { setTimeout(function() { document.getElementById('animated-bg').style.backgroundImage = "url(" + base + bgImageArray[k] + ")"; // document.getElementById('animated-bg').style.backgroundSize ="cover"; if ((k + 1) === bgImageArray.length) { setTimeout(function() { backgroundSequence() }, (secs * 1000)) } else { k++; } }, (secs * 1000) * i) } } backgroundSequence(); $('.carousel-item').click(function() { backgroundSequence(); })

 *, *::before, *::after { margin: 0; padding: 0; } html { box-sizing: border-box; } body { box-sizing: inherit; color: #fff !important; } .animated-bg { background-image: url("https://res.cloudinary.com/iolamide/image/upload/v1604569872/home_banner_1_ozdgvm.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; transition: background 1s; height: 694px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .animated-bg:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .container { padding: 3rem; border-radius: 20px; width: 700px; background: rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .text-top p { width: 400px; margin: 30px auto; text-align: center; } h1 { margin-top: 0; text-align: center; font-weight: 600; } .carousel-item p { width: 330px; text-align: center; } .carousel-indicators { bottom: -50px !important; } @media only screen and (max-width: 800px) { .container { padding: 2rem; width: 90%; } } @media only screen and (max-width: 500px) { .text-top p { width: 80%; } }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="animated-bg" id="animated-bg"> <div class="container"> <div class="text-top" id="texttop"> <h1>Crossfade and Text Carousel</h1> <p>Fade background image and swipe text at the same time. Also fade the background image to the one that matches the carousel's text when the carousel's indicator is clicked</p> </div> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="5000"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <p> Carousel Text One </p> </div> <div class="carousel-item"> <p>Carousel Text Two</p> </div> <div class="carousel-item"> <p>Carousel Text Three</p> </div> </div> </div> </div> </div>

Answer 1

您不需要自己处理图像的所有逻辑。 您可以使用 carousel api on('slide.bs.carousel')收听幻灯片更改并相应地切换图像。

 const bgImageArray = ["1_ozdgvm.jpg", "2_vjtjfy.jpg", "3_oxpdx2.jpg"], base = "https://res.cloudinary.com/iolamide/image/upload/v1604569872/home_banner_"; bgImageArray.forEach(function(img) { new Image().src = base + img; // caches images, avoiding white flash between background replacements }); $('.carousel'). on('slide.bs.carousel', function(e) { $('.animated-bg').css({ backgroundImage: `url(${base}${bgImageArray[e.to]})` }); });

 *, *::before, *::after { margin: 0; padding: 0; } html { box-sizing: border-box; } body { box-sizing: inherit; color: #fff !important; } .animated-bg { background-image: url("https://res.cloudinary.com/iolamide/image/upload/v1604569872/home_banner_1_ozdgvm.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; transition: background 1s; height: 694px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; } .animated-bg:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .container { padding: 3rem; border-radius: 20px; width: 700px; background: rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .text-top p { width: 400px; margin: 30px auto; text-align: center; } h1 { margin-top: 0; text-align: center; font-weight: 600; } .carousel-item p { width: 330px; text-align: center; } .carousel-indicators { bottom: -50px !important; } @media only screen and (max-width: 800px) { .container { padding: 2rem; width: 90%; } } @media only screen and (max-width: 500px) { .text-top p { width: 80%; } }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="animated-bg" id="animated-bg"> <div class="container"> <div class="text-top" id="texttop"> <h1>Crossfade and Text Carousel</h1> <p>Fade background image and swipe text at the same time. Also fade the background image to the one that matches the carousel's text when the carousel's indicator is clicked</p> </div> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="5000"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <p> Carousel Text One </p> </div> <div class="carousel-item"> <p>Carousel Text Two</p> </div> <div class="carousel-item"> <p>Carousel Text Three</p> </div> </div> </div> </div> </div>

https://jsbin.com/mewiwuv/edit?js,output