javascript - 淡入淡出一系列图像，但一次只显示几张

Question

所以，我想弄清楚如何让这个技巧奏效。

我有一系列图片:

<div class="images">
  <img src="https://www.fillmurray.com/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
  <img src="https://www.fillmurray.com/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
  <img src="https://www.fillmurray.com/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
  <img src="https://www.fillmurray.com/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
  <img src="https://www.fillmurray.com/200/300" alt="">
  <img src="https://www.fillmurray.com/g/200/300" alt="">
</div>

我想做的是让它们淡入和淡出，但一次最多显示五个，然后让它们在每个之间随机淡入和淡出。

我知道如果我添加这个:

.images img:nth-child(n+5) {
    display: none;
}

这将隐藏其余图像，但我真的不知道如何让另一个淡入淡出。

不确定是否有像 jQuery Cycle2 这样的东西可以处理这个问题，或者是否有其他东西可以尝试“循环”隐藏的其他图像并继续浏览。

Answer 1

我创建了一个快速、简单的 jQuery 函数，可以帮助您入门。该函数本质上有两个参数(都是类名)。该函数获取所有在第一个参数中设置了类名的图像，并随机获取一个具有该类名的图像。然后它从图像中删除该类，并在第二个参数中添加该类。

因为我已经定义了两个 css 类，hide 和 show，所以我可以使用我的函数隐藏当前正在显示的随机图像，然后显示另一个正在显示的随机图像目前隐藏。

函数被设置为一个定时器，每 600 毫秒运行一次。

function shuffleRandomCat(remove, add) {
  const cats = $("."+remove).toArray();
  const catLength = cats.length;
  const randomNum = Math.floor(Math.random()*catLength);
  const randomCat = cats[randomNum];
  $(randomCat).removeClass(remove);
  $(randomCat).addClass(add);
}

window.setInterval(function(){
  // remove a cat
  shuffleRandomCat("show", "hide");
  // display a cat
  shuffleRandomCat("hide", "show");
}, 600);

img {
  transition: opacity .5s ease;
  border: 2px solid black;
  max-height: 100px;
}

.show {
  opacity: 1;
  visibility: visible;
  width: auto;
}

.hide {
  opacity: 0;
  visibility: hidden;
  width: 0;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="images">
  <img src="http://placekitten.com/100/100" class="show">
  <img src="http://placekitten.com/200/200" class="show">
  <img src="http://placekitten.com/300/300" class="show">
  <img src="http://placekitten.com/400/400" class="show">
  <img src="http://placekitten.com/500/500" class="show">
  <img src="http://placekitten.com/600/600" class="hide">
  <img src="http://placekitten.com/700/700" class="hide">
  <img src="http://placekitten.com/800/800" class="hide">
  <img src="http://placekitten.com/900/900" class="hide">
  <img src="http://placekitten.com/800/700" class="hide">
  <img src="http://placekitten.com/700/600" class="hide">
</div>