CODEWITHSUNDEEP
javascriptdomtimersettimeoutsetinterval
nishkaush
nishkaush

Reputation: 1558

Issues with Automatic Slideshow in pure javascript

I am trying to display 4 pictures in an automatic slideshow by building it in pure javascript. setInterval() and setTimeout() functions are really confusing me.

The code displays first pic and then waits for 3sec and displays the last pic and then ends.....duno why?? 

var divImages = document.getElementById("images");
var img1 = document.getElementById("img1"); //display:none using CSS
var img2 = document.getElementById("img2"); //display:none using CSS
var img3 = document.getElementById("img3"); //display:none using CSS
var img4 = document.getElementById("img4"); //display:none using CSS

window.addEventListener("load", getFirstImage);


function getFirstImage(){
  img1.style.display = "block";
}

function getSecondImage(){
  img2.style.display = "block";
  img1.style.display = "none";
}
setTimeout(getSecondImage,3000);

function getThirdImage(){
  img3.style.display = "block";
  img2.style.display = "none";
}
setTimeout(getThirdImage,3000);

function getFourthImage(){
  img4.style.display = "block";
  img3.style.display = "none";
}
setTimeout(getFourthImage,3000);

Upvotes: 0

Views: 103

Answers (3)

Vinay
Vinay

Reputation: 7674

It's very easy but before I explain try this

setTimeout("alert('a')",3000)
setTimeout("alert('b')",3000)

You see? Both run exactly after 3 seconds why? You ask because

setTimeouts are asynchronous

ie. they won't wait for one another.When javascript interpreter sees the first setTimeout it records that in it's “stuff to do after 3 secs” now after recording that it read the second setTimeout and this also gets recorded in the same list but real point to note is that almost zero time has passed between the last two events moreover due to incredible speed of js engine even if you put a huge code( even k lines of code) in between the two setTimeouts they still would run after 3 secs in order of their appearance.That's why all 4 slide functions ran after 3 secs in order of their setTimeouts since getFourthImage() was the last to run only its effect remained

so how do you cascade them ? Just put settimeout of a slide in it's preceding slides function sort of like alarm or like some relay race

window.addEventListener("load", getFirstImage);


function getFirstImage(){
  img1.style.display = "block";
  setTimeout(getSecondImage,3000);
}

function getSecondImage(){
  img2.style.display = "block";
  img1.style.display = "none";
  setTimeout(getThirdImage,3000);
}


function getThirdImage(){
  img3.style.display = "block";
  img2.style.display = "none";
  setTimeout(getFourthImage,3000);
}

function getFourthImage(){
  img4.style.display = "block";
  img3.style.display = "none";   // last one no need to put anything but you can if you wish
}

Upvotes: 1

HenryDev
HenryDev

Reputation: 4993

Here's a working solution. Hope it helps!

setInterval(miFuncion, 2500);

var counter = 1;

function miFuncion()
 {
    var elemento = document.getElementById("foto");

    if(counter === 0 ){
      elemento.src = "http://i2.cdn.cnn.com/cnnnext/dam/assets/141027105451-pkg-petroff-ferrari-sergio-elite-car-00014417-story-top.jpg";
    }
    else if(counter === 1){
      elemento.src = "http://www.fashiontrends.pk/wp-content/uploads/2012/02/Porsche-Sports-Car.jpg";
    }
    else if(counter === 2){
      elemento.src = "http://bestcarlive.com/wp-content/uploads/bmw-sports-car-wallpapers-20140720034912-53cb3c380a9cf.jpg";
    }
    else if(counter === 3){
      elemento.src = "http://media.caranddriver.com/images/17q1/674191/2018-kia-stinger-sports-sedan-photos-and-info-news-car-and-driver-photo-674389-s-450x274.jpg";
      counter = -1;
    }
    ++counter;
 }
<img src="http://i2.cdn.cnn.com/cnnnext/dam/assets/141027105451-pkg-petroff-ferrari-sergio-elite-car-00014417-story-top.jpg" id="foto" width="100%" height="350">

Upvotes: 1

KarpeDM
KarpeDM

Reputation: 1

 <script type="text/javascript">
 $("#slideshow > div:gt(0)").hide();
 setInterval(function() {
 $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 1200);
</script>

I see that you have getElementById, so I'm assuming you have some HTML? this is a jquery script with assumption you have a div with a class named slideshow any div you nest in that div will be in the slideshow! hope this helps

Upvotes: 0

Related Questions