循环浏览图像列表并随机显示一个短暂的闪光

Question

我有以下 html 结构：

<ul class="posts">
    <li><img src="https://64.media.tumblr.com/1ff0b6435eaf4f2179e06cfbd9fca583/8fb2fa7b9e4b2d56-1f/s1280x1920/e1a986dea1f99a0cd9dcc7e672bb4a76254df4c4.jpg" class="hidden"></li>
    <li><img src="https://64.media.tumblr.com/70ec82e83c3c5835b10aec4927e253b8/8fb2fa7b9e4b2d56-d0/s540x810/c51483723f355f77a3ae6a17fe19da6525662b46.jpg" class="hidden"></li>
    <li><img src="https://64.media.tumblr.com/7d2f63f029ba23c1e4a6fe28fd6f52d7/8fb2fa7b9e4b2d56-80/s540x810/e6465ab8578c263f62075a2740b763822cbec270.jpg" class="hidden"></li>
    ...
</ul>

设置项目 css:

.posts img {
    width: 100%;
    position: absolute;
}

.hidden {
    display: none;
}

.block {
    display: block;
}

这是我的 JS/jQuery:

const blockClass = 'block';
const hiddenClass = 'hidden';

function setRandomImage() {
    const randomIndex = (parseInt(Math.random() * $('.posts li').length));
    $('.posts img').removeClass(blockClass).addClass(hiddenClass); // remove block class and add hidden class from all elems. 
    sleep(2000);
    $(`.posts li:eq(${randomIndex}) img`).addClass(blockClass); // add block class to random item. 
    sleep(4000);
    $(`.posts li:eq(${randomIndex}) img`).removeClass(blockClass).addClass(hiddenClass); // remove block class and add hidden class to random item
    sleep(3000); // testing sleep function for 3s
}

setInterval(function () {
    setRandomImage();
}, 2000);

function sleep(milliseconds) {
    const date = Date.now();
    let currentDate = null;
    do {
        currentDate = Date.now();
    } while (currentDate - date < milliseconds);
}

概念是默认隐藏所有图片。从图像数组中选择一个随机索引，将 display block class 添加到它，然后暂停一段时间（我希望图像非常短暂地闪烁）然后它应该再次隐藏。

暂停应该使用睡眠功能来实现。如果我只是添加一些控制台日志和不同的睡眠间隔，这似乎有效，直到间隔之后日志才会出现。

此外，如果我调试 js，我实际上可以看到图像属性设置正确。但是一旦它在浏览器中是运行，这些项目就永远不可见。我不确定这是性能问题还是 jQuery 的一些怪癖。我只希望它们像频闪效果一样闪烁，但我尝试使用睡眠功能设置更长的持续时间，看看是否有效果。

编辑

如果这与性能有关，我想知道更好的实现方式，但据我所知，它应该是相当低级的。

JSFIDDLE

Answer 1

您的 sleep 功能是浏览器杀手！

它通过将它保持在一个 while 循环中几秒钟（这是长的方式），重复地阻止所有 JS 执行。所以如果网站上有按钮，点击事件是不会响应的。事实上，什么都不会。简而言之，这是一个可怕的想法。

为了达到你想要的效果，只要有一个间隔来触发一个CSS@keyframes的动画，短暂的flash up效果。

这就是您所需要的：

function setRandomImage() {
  
  const randomIndex = parseInt(Math.random() * $(".posts li").length);
  
  // remove block class from all elems.
  $(".posts img").removeClass("block");
  
  // add block class to random item.
  $(`.posts li:eq(${randomIndex}) img`).addClass("block");

}

// The interval of 9 seconds
setInterval(function () {
  setRandomImage();
}, 9000);
setRandomImage();

.posts img {
  width: 100%;
  position: absolute;
  display: none;  /* The default hide is here */
}

.block {
  display: block !important;
  opacity: 0;
  animation: flashImg 2s;  /* That is the "flash" duration */
}

@keyframes flashImg {  /* And that is the flash animation */
  0% {opacity: 0;}
  10% {opacity: 1;}  /* play with the percentages to smooten the apparition */
  90% {opacity: 1;}
  100% {opacity: 0;}
}

li{
  list-style: none;  /* Removes li bullets */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="posts">
    <li><img src="https://64.media.tumblr.com/1ff0b6435eaf4f2179e06cfbd9fca583/8fb2fa7b9e4b2d56-1f/s1280x1920/e1a986dea1f99a0cd9dcc7e672bb4a76254df4c4.jpg"></li>
    <li><img src="https://64.media.tumblr.com/70ec82e83c3c5835b10aec4927e253b8/8fb2fa7b9e4b2d56-d0/s540x810/c51483723f355f77a3ae6a17fe19da6525662b46.jpg"></li>
    <li><img src="https://64.media.tumblr.com/7d2f63f029ba23c1e4a6fe28fd6f52d7/8fb2fa7b9e4b2d56-80/s540x810/e6465ab8578c263f62075a2740b763822cbec270.jpg"></li>
</ul>

循环浏览图像列表并随机显示一个短暂的闪光

Cycle through list of images and display one at random for a short flash

javascript

jquery

timer

setinterval