Question

所以，我试图弄清楚如何使这个技巧起作用。

我有一系列图像：

regex_match

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

我知道是否要添加此内容

<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>

这将隐藏其余图像，但是我真的无法弄清楚如何使另一个淡入淡出和另一个淡出。

不确定是否有类似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>

淡入和淡出一系列图像，但一次只显示几个

1 个答案: