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中的那种令人讨厌的限制，你可以在动画中重复延迟。

通过这种方式，你可能会冒着间隔时间有时会异步运行到图像滑块（稍微迟到）的风险，如果你有很长的循环其他javascripts运行，只有在另一件事完成后才会重新启动。

但另一方面，你可以使用花哨的css3过渡，而不需要管理javascript中的时间。

＆＃13;

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

＆＃13;

.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;
  }
}

＆＃13;

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

＆＃13;

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

1 个答案: