-6

I have two images:

Image 1: /assets/promo_xmas.png

Image 2: /assets/howtoplay.gif

and I want to make one show for 10 seconds then hide, after that has hidden I want the second image to show for 10 seconds then hide and after that the first images to show for 10 seconds then hide and I want that to repeatedly do forever.

The html for Image 1 is:

<div id="howtogif" class="gif" style="margin-top: 33px; display: flex;">
    <img width="320" height="267" src="assets/howtoplay.gif">
</div>

The html for image 2 is:

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

Also if you can please tell me how to do this using fadeout and fadein. Thanks.

(Feel free to edit this to make it more understandable)

zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • Do a search for jquery animations and manipulation. Start there. – Zach M. Dec 29 '17 at 17:55
  • simple to use jQuery carsoule plugin – Alive to die - Anant Dec 29 '17 at 17:56
  • @ZachM. Okay do you have any recommended websites that explains jquery animations and manipulation? –  Dec 29 '17 at 17:59
  • Another way: [CSS animation](https://stackoverflow.com/questions/17954874/cross-fade-between-images-with-css-in-loop). – showdev Dec 29 '17 at 18:00
  • @AlivetoDie I'm don't want to use a plugin but thanks for the suggestion. –  Dec 29 '17 at 18:00
  • @TigerYT what's wrong with the answers given to your [previous question](https://stackoverflow.com/questions/47969536/how-do-i-make-an-image-repeatedly-show-and-hide-every-x-seconds)? – Sébastien Dec 29 '17 at 18:02
  • Possible duplicate of [How do I make an image repeatedly show and hide every x seconds?](https://stackoverflow.com/questions/47969536/how-do-i-make-an-image-repeatedly-show-and-hide-every-x-seconds) – Sébastien Dec 29 '17 at 18:03
  • @Sébastien on my previous question I didn't put the part of the second image (also it didn't work for me but on snippet it did work) I also made a mistake on the part where I said 10s, 10s, 10s, 7. and someone didn't know if I wanted it to stay the same throughout (which I did want it to stay the same) –  Dec 29 '17 at 18:05
  • Possible duplicate of [Cross-Fade between images with CSS in loop](https://stackoverflow.com/questions/17954874/cross-fade-between-images-with-css-in-loop) – Don Cruickshank Jul 13 '19 at 00:23

3 Answers3

2

CSS Animation

  • Wrap both images in a block element that has: position:relative

  • Set both images to position:absolute

  • Make 2 @keyframes and animation: 10s infinite alternate

  • Assign a @keyframe animation to each image.

  • The 2 properties being animated is opacity and z-index (z-index is only on 2 frames because there's only 2 states really lower or higher than another positioned element).

Demo

#promo {
  margin-top: 33px;
  position: relative;
}

img {
  width: 320px;
  height: 267px;
  position: absolute;
}

.A {
animation: animA 10s infinite alternate;
}

.B {
animation: animB 10s infinite alternate;
}

@keyframes animA {
  0%, 25% {
    opacity: 0;
    z-index: 0;
  }
  50% {
    opacity: .5;
  }
  
  100% {
    opacity: 1;
    z-index: 1
  }
}

@keyframes animB {
  0%,25% {
    opacity: 1;
    z-index: 1;
  }
  50% {
    opacity: .5;
  }
 100% {
    opacity: 0;
    z-index: 0
  }
}
<figure id="promo">
  <img src="https://pockey.io/assets/promo_xmas.png" class='B'>




  <img src="https://pockey.io/assets/howtoplay.gif" class='A'>
</figure>
Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • Works great but I can only put one in "Awnsers" –  Dec 30 '17 at 14:36
  • I'm sorry what do you mean: *"...can only put one in "Answers"*? – zer00ne Dec 30 '17 at 17:25
  • I can only tick one of the answers –  Dec 31 '17 at 08:32
  • I see, well AFAIK, there's upvoting an answer or question by clicking the arrow (triangle) pointing up which is 10pts for an answer and 5pts for a question. Then there's accept (15pts) that only the OP (Original Poster) can do for only the best answer by clicking the check mark. Also, the OP can accept and upvote (25pts) an answer as well. Of course that may be a little different for new accounts. Anyways, I'm glad it helped, happy coding. – zer00ne Dec 31 '17 at 09:11
0

First response on googling for a carousel : http://kenwheeler.github.io/slick/

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    // Add the new slick-theme.css if you want the default styling
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>

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


<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('.your-class').slick();
    });
</script>
</body>
</html>

Recommended to bang that last script tag in an external JavaScript file.

thatguy
  • 99
  • 1
  • 11
  • This doesn't show how to make it repeatedly hide and show.. (if it does reply) –  Dec 29 '17 at 18:12
0

This is a basic example:

function showOne() {
  var img = $("img").eq(0);
  img.fadeIn('slow').delay('10000').fadeOut('slow', showTwo);
}

function showTwo() {
  var img = $("img").eq(1);
  img.fadeIn('slow').delay('10000').fadeOut('slow', showOne);
}

$(function() {
  $('img').hide();
  showOne();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="howtogif" class="gif" style="margin-top: 33px; display: flex;">
  <img width="320" height="267" src="http://via.placeholder.com/350x150?text=1">
</div>

<div id="promo" class="gif" style="margin-top: 33px;">
  <img width="320" height="267" src="http://via.placeholder.com/350x150?text=2">
</div>
luisenrike
  • 2,742
  • 17
  • 23