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

Question

I have an image that I want to show for 10 seconds and then hide for 10 seconds and then show for 10 seconds and hide for 10 seconds and do that process repeatedly forever, but I don't know how... I needs to be done using either JavaScript, CSS3 or HTML5!

HTML for the Image:

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

and I want this to just show for 10 seconds and hide for 10 seconds

Who ever answers this question can you please put an x for the amount of Seconds? thanks!

Answer 1

I'm surprised no one gave a CSS-only answer yet, so here is one.

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

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

Answer 2

Taking your question quite literal, I think this is what you want. Image shows for 10s hides for 10s, then shows for 10s and hides for 7s, repeat.

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

Added setInterval in case you need to wait for the page to load. There are better ways and personally, I would lose the 7s and loop with CSS keyframes as mentioned in other answers, yet if I was chucking something together that was very simple, needing that 7s, this is what I would start with.

 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>

As prime suggests, it's better to add a fiddle https://jsfiddle.net/xwd1jcfg/

Answer 4

The first question is whether you need the image to become invisible with layout remaining unchanged or the entire block to be removed and inserted again. I'm guessing its the former. Either way i prefer javascript. Use javascript setTimer to toggle opacity between 1 and 0, or set display to block or none.

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

Transparent class should be in css, with opacity set to 0.

I'm typing from phone, so please expect syntax mistakes and correct accordingly. Also set X to any integer value, --edit--

Just reminded myself that you need repeat event and not timeout. Use setInterval function.

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

Div_id_img_invisible should override display or opacity property of div_id_img.