CODEWITHSUNDEEP
javascriptsettimeoutslideshow
itti
itti

Reputation: 51

How can I loop setTimeout slideshow javascript

on function start(){ my javascript I want my slideshow to be like when It start, It would wait for 2s, then It should go to (slide2) first with setTimeout(slide2, 2000); without waiting for so long with '8 second' from }, 8000);.

then It would go to (slide3) with setTimeout(slide3, 4000); (It means wait for 2s per slide) then (slide3) at the last slide, It should go back to (slide1) to star loop again.. //Code-on-JsFiddle//

or any simple way to write javascript loop you would like to suggest.

var div = document.getElementsByClassName('content')[0]; 
var box = document.getElementsByClassName('box')[0];
var u = -100;

function slide1(){
box.style.marginLeft = '0';}
function slide2(){
box.style.marginLeft = '-100px';}
function slide3(){
box.style.marginLeft = '-200px';}

function start() {
    setTimeout(function() {
setTimeout(slide2, 2000);
setTimeout(slide3, 4000);   
setTimeout(slide1, 6000);          
   start();
    }, 8000);
}
start();
body { margin:0; padding:0;}
.content { width: 100px; height:60px; margin:5px 0px; 
          overflow:hidden; white-space:nowrap; background: lightgray; 
          display: inline-block; position: relative; 
          border:2px solid black; }
.box { width: 100px; height: 50px; display: inline-block; 
       position: relative; border:1px solid black; margin:0px; 
       background:lightblue; transition: all 0.5s ease; }
.button { padding:5px; border:1px solid black; background:pink;   
          display:inline-block; }
<body>
<div class='content'>
<div class='box'>1</div>  
<div class='box'>2</div>  
<div class='box'>3</div>  
</div>
<br/>
<div class='button' onclick='slide1();'>1</div>
<div class='button' onclick='slide2();'>2</div>
<div class='button' onclick='slide3();'>3</div>
</body>

Upvotes: 0

Views: 286

Answers (1)

Tigger
Tigger

Reputation: 9130

I think your approach with multiple functions is not a good idea. Keeping as much of your code as possible, this re-write is a lot more expandable.

var div = document.getElementsByClassName('content')[0]; 
var box = document.getElementsByClassName('box')[0];
var u = -100;
var slideIdx = 0;
var delay;

function slide(idx){
  //console.log("slide, slideIdx:["+ slideIdx +"], idx:["+ idx +"]");
  if (delay){
    clearTimeout(delay);
    delay=null;
  }
  if (idx){
    slideIdx = (idx > 2) ? 0 : idx;
  } else {
    slideIdx++;
  }
  slideIdx = (slideIdx > 2) ? 0 : slideIdx;  
  box.style.marginLeft = (-100 * slideIdx) +"px";
  delay = setTimeout(slide,2000);
}

delay = setTimeout(slide,2000);
.content {box-sizing:border-box;width:100px;height:60px;margin:5px 0px;
  overflow:hidden;white-space:nowrap;background:lightgray;
  display:inline-block;position:relative;border:2px solid black}
.box {box-sizing:border-box;width:100px;height:50px;display:inline-block;position:relative;
  border:1px solid black;margin:0px;background:lightblue;
  transition: all 0.5s ease}
.button { padding:5px; border:1px solid black; background:pink;   
  display:inline-block;}
<body>
<div class='content'><div 
class='box'>1</div><div class='box'>2</div><div 
class='box'>3</div></div>
<br/>
<div class="button" onclick="slide(0)">1x</div>
<div class="button" onclick="slide(1)">2x</div>
<div class="button" onclick="slide(2)">3x</div>
</body>

Upvotes: 4

Related Questions