我想随机化并向图像列表添加平滑过渡

Question

我目前正在循环播放图像列表。以下是我到目前为止所拥有的。我无法正确随机化列表。

另外，我怎样才能过渡到下一张图片。我想让我的图像平滑地淡入下一张图像，而不是快速将图像切换到下一张。

HTML

<div class="TestRotator">

    <img height="170" id="rotator" class="img-fluid, image-hover" alt="Responsive image"/>

</div>

<script src="js_src/art-imagechanger.js"></script>

JS

(function () {

    var rotator = document.getElementById("rotator"); 

    

      var imageDir = ['https://vignette.wikia.nocookie.net/birds/images/0/09/Birds-01.jpg','https://nas-national-prod.s3.amazonaws.com/styles/hero_mobile/s3/h_a1_7443_5_painted-bunting_julie_torkomian_adult-male.jpg','https://www.allaboutbirds.org/news/wp-content/uploads/2020/07/STanager-Shapiro-ML.jpg',];

    var i = 0;

    function loop() {

    if(i > (imageDir.length - 1)){

        i = 0;

    }

    var r = rotator.src = imageDir[i];

    Math.floor(Math.random() * r)

    i++;

    loopTimer = setTimeout(loop ,3000);

    }

    loop();

  })();

Answer 1

至于淡入，这需要对您的 html 进行一些调整。您需要有 2 张图像 - 旧图像和新图像。<img height="170" id="rotator-old" class="img-fluid, image-hover" /> <img height="170" id="rotator-new" class="img-fluid, image-hover" />然后在你的 js 中，你需要改变每个类，并应用 see 来淡化不透明度。在你的 js 中：var rotatorOld = document.getElementById("rotator-old"); var rotatorNew = document.getElementById("rotator-new"); var imageDir = [<image urls>];var shuffledImages = shuffle(imageDir)var i = 0;function loop() {  // remove visibility from image being transitioned to  rotatorNew.classList.remove('visible')  if(i > (imageDir.length - 1)){    i = 0;  }    if (i > 0) { // starting from rest with the first image    // set image in the background to previous image    rotatorOld.src = shuffledImages[i-1]  }  // set image in the foreground to new image  rotatorNew.src = shuffledImages[i]  // add visibility class with css transition  rotatorNew.classList.add('visible')  i++;  loopTimer = setTimeout(loop ,3000);}loop();在您的 CSS 中，在 2.5 秒延迟后以 0.5 秒过渡过渡不透明度：#rotator-new {  opacity: 0;}#rotator-new.visible {  opacity: 1;  transition: opacity 500ms 2500ms // or whatever}您还需要使用一些 CSS 来确保新旧图像正确重叠。position: relative;这可以通过将父级设置为 have a并将每个子级img设置为 have来完成position: absolute; top: 0, bottom: 0; left: 0, right: 0;。我没有机会测试这段代码，所以它可能需要一些调整才能正常运行。但是如果你用一些示例图像制作一个 codesandbox 或 codepen，我相信我们可以让它工作。如果不需要自己编写代码，我还建议寻找第 3 方库来为您处理此问题。这称为轮播，Boostrap是您可以使用的一个很好的轮播。