如何使图像每 x 秒重复显示和隐藏？答案

【问题标题】：How do I make an image repeatedly show and hide every x seconds?如何使图像每 x 秒重复显示和隐藏？
【发布时间】：2017-12-25 14:32:33
【问题描述】：

我有一张图像，我想显示 10 秒，然后隐藏 10 秒，然后显示 10 秒，然后隐藏 10 秒，然后永远重复这个过程，但我不知道如何......我需要使用 JavaScript、CSS3 或 HTML5 来完成！

图像的 HTML：

<div id="promo" class="gif" style="margin-top:33px;">
     <img width="320" height="267" src="assets/promo_xmas.png">
</div>

我希望它只显示 10 秒并隐藏 10 秒

谁曾经回答过这个问题，你能在秒数上打一个 x 吗？谢谢！

【问题讨论】：

应该在每个周期后减少秒数还是保持静止？
你应该发布你已经尝试过的内容。
看看setTimeout。如果您遇到问题，请更新您的问题！ MDN reference

标签： javascript css

【解决方案1】：

我很惊讶还没有人给出纯 CSS 的答案，所以这里是一个。

img {
  opacity: 0;
  animation: disappear 10s linear 0s infinite alternate;
}

/* The animation code */
@keyframes disappear {
    from {opacity: 0;}
    to {opacity: 1;}
}

【讨论】：

【解决方案2】：

从字面上看你的问题，我认为这就是你想要的。图片显示10s隐藏10s，然后显示10s，隐藏7s，重复。

function promoFade() {
 $('#promo').delay(x).fadeOut(150).delay(x).fadeIn(150).delay(x).fadeOut(150).delay(x).fadeIn(150);
};
setInterval("promoFade()", 0);

添加了setInterval，以防您需要等待页面加载。有更好的方法，就个人而言，我会失去 7s 并使用 CSS keyframes 循环，正如其他答案中提到的那样，但是如果我将一些非常简单的东西放在一起，需要那个 7s，这就是我要开始的。

function promoFade() {
  $('#promo').delay(10000).fadeOut(150).delay(10000).fadeIn(150).delay(10000).fadeOut(150).delay(7000).fadeIn(150);
};
setInterval("promoFade()", 0);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="promo" class="gif" style="margin-top:33px;">
     <img width="320" height="267" src="http://placehold.it/320x267/green/ffffff/&text=image">
</div>

【讨论】：

【解决方案3】：

第一个问题是您是否需要在布局保持不变的情况下使图像变得不可见，或者整个块被删除并重新插入。我猜是前者无论哪种方式，我更喜欢javascript。使用 javascript setTimer 在 1 和 0 之间切换不透明度，或将显示设置为阻止或无。

$(document).ready(function() { $("#div_id_onclick").click(function() { setTimeout(function(){ $("#div_id_img").toggleClass("transparent"); }, X000); });});

透明类应该在css中，不透明度设置为0。

我是通过电话输入的，所以请注意语法错误并进行相应的更正。还将 X 设置为任何整数值， --编辑--

只是提醒自己，您需要重复事件而不是超时。使用 setInterval 函数。

setInterval(function(){$('.div_id_img').toggleClass('div_id_img_invisible')}, X000);

Div_id_img_invisible 应该覆盖 div_id_img 的 display 或 opacity 属性。

【讨论】：

【解决方案4】：

<div id="promo" class="gif" style="margin-top:33px;">
     <img width="320" height="267" src="assets/promo_xmas.png">
</div>

<script>
   window.setInterval(function () {
    let gif = document.querySelector('.gif');
    if(gif.classList.contains('hide')) {
      gif.classList.remove('hide');
    } else {
      gif.classList.add('hide');
    }
   }, 10000); // or 7000 or whatever ;)

</script>

<style>
  .hide img {
    display: none;
  }
</style>

正如prime所说，最好加个小提琴https://jsfiddle.net/xwd1jcfg/

【讨论】：

如果你能在这里加个小提琴就好了。