Question

我有一个想要显示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换成秒数？谢谢！

Answer 1

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

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

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

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

Answer 3

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

正如素数所示，最好添加一个小提琴https://jsfiddle.net/xwd1jcfg/

Answer 4

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

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

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

我正在通过手机打字，因此请注意语法错误并相应更正。同时将X设置为任何整数值， --edit -

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

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

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

如何每隔x秒重复显示和隐藏图像？

4 个答案: