时间戳

首页 > 解决方案 > 我想随机化并添加平滑过渡到图像列表

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

问题描述

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

另外，我该如何过渡到下一张图片。我希望我的图像平滑地淡入下一张图像，而不是快速将图像更改为下一张。

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

标签： javascript

解决方案

对于随机化，请查看此问题中 js 数组的 shuffle 函数。

至于淡入，这需要对您的 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 来确保新旧图像正确叠加。这可以通过将父级设置为拥有 aposition: relative;并且每个子级设置img为拥有来完成position: absolute; top: 0, bottom: 0; left: 0, right: 0;。

我没有机会测试此代码，因此可能需要进行一些调整才能正常运行。但是，如果您使用一些示例图像制作代码沙盒或代码笔，我相信我们可以让它工作。如果不需要自己编写代码，我还建议寻找第 3 方库来为您处理此问题。这被称为轮播，而Boostrap是一个不错的选择，您可以使用它。

推荐阅读