改变图像的延迟功能答案

【问题标题】：delay function for changing image改变图像的延迟功能
【发布时间】：2018-01-12 23:17:49
【问题描述】：

我有这段代码可以在更改随机生成的图像时将淡入淡出效果变为黑色：

var imgs = new Array("https://store.vtxfactory.org/wp-content/uploads/2018/header/1.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/2.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/3.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/4.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/5.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/6.jpg");

function changeOverlay() {
    $('#overlay').animate({opacity: 1,}, 1000);
    $('#overlay').animate({opacity: 0,}, 1000);
}

function changeBg() {
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#masthead').css('background-image', 'url(' + imgUrl + ')');
}

function changeBackgroundSmoothly() {
    $('#masthead').animate(0, changeBg);
}

setInterval(changeOverlay,2000);
setTimeout(changeBackgroundSmoothly,3000);

问题是，图像只在第一次改变。我怎样才能让它像淡入淡出效果一样循环播放？

你可以在这里有一个视觉想法：https://store.vtxfactory.org

谢谢。

【问题讨论】：

如果没有工作示例，很难给您答案，但您似乎正在淡入并立即淡出#overlay，因此它们会相互抵消。
你在store.vtxfactory.org有工作示例。
@SteveKess 我不知道我是否理解你，你想停止changeOvelay功能直到图像充电然后重新启动changeOvelay功能还是什么？
@YouneL 如果你在这里看到store.vtxfactory.org 背景在黑色淡入效果之前切换。我需要使它如下： 1. FadeIn Black > 2. 当 FadeIn Black 为 100% > 3. FadeOut Black 时更改背景图像
@YouneL 因此，要使其生效，我首先需要为 changeBackgroundSmoothly 函数添加 1 秒的延迟

标签： javascript jquery html css function

【解决方案1】：

如果这些是固定的（预先确定的）图像文件名，那么您可以使用像这样的标准 CSS 动画...

<!DOCTYPE html>
<head>

<style type="text/css">

.Container {
 position: absolute;
 left: 50px;
 top: 50px;
 width: 300px;
 height: 300px;
 background-image: url("");
 background-position: 0% 0%;
 background-size: 100% 100%;
 animation: AnimText 3s linear 0s infinite alternate none;
}

@keyframes AnimText {

   0% {opacity:1; background-image: url("C:/Users/PackardBell/Pictures/Penguins.jpg");}

  50% {opacity:0.5; background-image: url("C:/Users/PackardBell/Pictures/Lighthouse.jpg");}

 100% {opacity:0; background-image: url("C:/Users/PackardBell/Pictures/Jellyfish.jpg");}
}

</style>
</head>

<body>

 <div class="Container"></div>

</body>
</html>

【讨论】：

【解决方案2】：

您的代码中的主要问题是您如何在每次转换中循环。每个过渡都需要调用回调函数通知并重新开始。

var imgs = new Array("https://store.vtxfactory.org/wp-content/uploads/2018/header/1.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/2.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/3.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/4.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/5.jpg","https://store.vtxfactory.org/wp-content/uploads/2018/header/6.jpg");
    
function changeOverlay(cb) {
    $('#masthead').animate({opacity: 1,}, 1000, function () {
        $('#masthead').animate({opacity: 0,}, 1000, cb);
    });
}
    
function changeBg() {
    var imgUrl = imgs[Math.floor(Math.random()*imgs.length)];
    $('#masthead').css('background-image', 'url(' + imgUrl + ')');
}
    
function changeBackgroundSmoothly() {
    $('#masthead').animate(0, changeBg);
}
    
function looping() {
    changeOverlay(function() {
        changeBackgroundSmoothly();
        setTimeout(looping, 500);
    });
}
    
looping();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="masthead" style='width: 500px; height: 500px'>

</div>

希望对您有所帮助！

【讨论】：

嗨，谢谢它正在同步工作！但是，现在淡入淡出效果是白色而不是黑色。有什么建议吗？
changeOverlay 函数必须寻址到 id #overlay 而不是 #masthead，因此菜单在后台开关上保持可见。但是当我更改它时，图像会不同步。

【解决方案3】：

我会将它放在“do while”中，然后执行它，直到您按下按钮或其他东西。这与超时功能的组合提供了您所需要的

【讨论】：

如果我使用 setInterval(changeBackgroundSmoothly,2000); 而不是 setTimeout(changeBackgroundSmoothly,3000); 它会循环，但 #masthead backgroud-image 在函数启动后立即更改。我需要1s的延迟，但我不知道如何设置。