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

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是您可以使用的一个很好的轮播。