javascript - 在页面中随机淡入和淡出图像？

Question

我遇到一个问题，每秒出现一个新图像时，我需要在页面上淡入和淡出 6 个随机图像。我已经尝试过在网上找到的代码，但它只在随机位置的一张图像中淡入淡出，而不会淡入/淡出其他图像。如果您能帮助我，我将非常感激。

代码:

$(document).ready(showLetter);
    var imgsArray = ["backgroundI1", "backgroundI2", "backgroundI3", "backgroundI4", "backgroundI5", "backgroundI6"];

    function generateRandomForArray() {
        var num = Math.floor(Math.random() * 8);
        return num;
    }

    function generateRandom() {
        var num = Math.floor(Math.random() * 400);
        return num;
    }


    function showLetter() {
        var name = imgsArray[generateRandomForArray()];
        $(".heroBackground").append("<img src='media/backgroundImages/" + name + ".png'>");
        var left = generateRandom();
        var top = generateRandom();
        $(".heroBackground").last().css({ "position": "absolute", "top": top + "px", "left": left + "px" });
    }

再次感谢您!

Answer 1

替代解决方案，使用 css 进行动画，并使用一个小的 javascript 片段来重置动画，因为 css 中存在令人讨厌的限制，您不能在动画重复中出现延迟。

通过这种方式，如果您正在运行大量长循环的其他 JavaScript，并且只有在其他事情完成时才会重新启动，那么您可能会面临间隔时间有时与图像 slider 异步运行的风险(有点晚)。

但另一方面，您可以使用精美的 css3 转换，并且不需要在 javascript 中管理时间。

/**
 *  replace with your own function that supplies array of random images.
 */
function getRandomImages() {
   var random = ['https://i.imgur.com/Y7icJAN.jpg','https://i.imgur.com/IX9YUcq.jpg','https://i.imgur.com/8p6P3gN.jpg','https://i.imgur.com/bAglKHW.jpg','https://i.imgur.com/VG0nBdD.jpg','https://i.imgur.com/vkUNuCx.jpg'];
   
   return random;
}
/** apply random images **/
var images = getRandomImages();
$('.hero .background').each(function(index, elem) {
   $(this).css({'background-image':"url('" + images[index] + "')"});
});
resetAnimationOnHeroes();

function resetAnimationOnHeroes() {
    var heroes = $('.hero .background');
  heroes.css({'animation':'none'});
  /** need timeout here so browser will not see all javascript changes as one instruction and only apply the last one **/
  window.setTimeout(function() {
    heroes.css({'animation':''});
  },10);
}
window.setInterval(resetAnimationOnHeroes, (15 * 1000) + 250);

.hero {
  width: 100%;
  height:200px;
  position:relative;
}
.hero .background {
  background-size:cover;
  background-position: center;
  background-color:black;
  width:100%;
  opacity: 0;
  height: 200px;
  animation: fadeHero 3s linear;
  
  position:absolute;
  top:0px;
  left:0px;
}
.hero .background:nth-child(1) {
    animation-delay: 0s;
    
}
.hero .background:nth-child(2) {
    animation-delay: 2.5s;
    
}
.hero .background:nth-child(3) {
    animation-delay: 5s;
    
}
.hero .background:nth-child(4) {
    animation-delay: 7.5s;
    
}
.hero .background:nth-child(5) {
    animation-delay: 10s;
    
}
.hero .background:nth-child(6) {
    animation-delay: 12.5s;
    
}

@keyframes fadeHero {
  0% {
    opacity:0;
  }
  25% {
     opacity: 1;
  }
  75% {
    opacity:1; 
  }
  100% {
     opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero">
  <div class="background"></div>
  <div class="background"></div>
  <div class="background"></div>
  <div class="background"></div>
  <div class="background"></div>
  <div class="background"></div>
</div>