Question

我已经获得了这样的代码，当它改变随机生成的图像时，会使淡化和淡出效果变为黑色：

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);

问题是，图像仅在第一次更改。我怎样才能在循环中进行，就像fadein fadeout效果一样？

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

感谢。

Answer 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>

Answer 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>

希望有所帮助！

Answer 3

我把它放在'do while'中，并执行它直到你按下按钮或其他东西。这与超时功能组合提供了您需要的功能

用于改变图像的延迟功能

3 个答案: