javascript - 如何随机选择三张图像，然后用新图像将它们淡出？

Question

我主要是一名 PHP 开发人员，我已经很长时间没有使用 jQuery 或 JavaScript。

我查看了 Google 和 Stack Overflow，但找不到完成工作所需的确切指导或代码。谁能帮忙？

我通过 PHP 提取 12 张随机图像并显示它们。我需要每两秒随机选择三张图片，将它们淡出，然后让三张新的独特图片淡入它们的位置。

如有任何帮助，我们将不胜感激。

           <?php
              $logos = array('0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19');

              $randomize = array_rand($logos, 12);
              shuffle($randomize);
              foreach ($randomize as $randomize) {
                echo '<div class="col-3">';
                  echo '<img class="w-100 mt-4" src="assets/img/' . $randomize . '.png" alt="img">';
                echo '</div>';
              }
            ?>

Answer 1

将您的数组复制为变量。

const logos = ['0', '1', '2', '3', ...];

Quick tip, if the array values are sequential, i.e. 0-19, you can just do:

const logos = [...Array(19).keys()]

创建一个从数组中返回 N 个随机元素的函数。如果你真的想要独特的随机化，那么这个网站上的例子很多，你可以使用任何你喜欢的东西。

const randomize = (n) => logos.sort(() => 0.5 - Math.random()).slice(0, n);

给你的图像一个类来识别它们，即 random-image

<img class="w-100 mt-4 random-image" src="assets/img/12.png" alt="img">

利用 jQuery 的 animate()方法，您可以淡出现有图像，通过将文件名替换为相应的随机数组元素来更改图像 src，然后淡入图像。

const images = $(".random-image");

let interval = setInterval(() => {
  let randomImages = randomize(images.length);
  images.each(function (index) {
    $(this).animate({opacity: 0}, 250, function () {
      this.src = this.src.replace(/(.*)\/.*(\.png$)/i, `$1/${randomImages[index]}$2`);
      $(this).animate({opacity: 1}, 250);
    });
  });
}, 2000);

用动画代替通常的不透明度的好处 fading methods是保留文档流，这将为您提供所需的“就地”淡入淡出效果。 fadeIn 和 fadeOut 方法实际上会更改元素的 display 属性，这将使它们消失并中断页面流。

---

希望这能稍微唤起您的内存。