如何循环播放 setTimeout 幻灯片 javascript

Question

在 function start(){ 我的 javascript 我希望我的幻灯片放映时像它开始时那样，它会等待 2s，然后它应该先转到 (slide2) setTimeout(slide2, 2000); 不用等那么久 和 }, 8000);.

的 '8 秒'

然后它将转到 (slide3) 和 setTimeout(slide3, 4000); （这意味着每张幻灯片等待 2s）然后在最后一张幻灯片的 (slide3)，它应该返回到 (slide1) 到再次星环.. //Code-on-JsFiddle//

或您建议的任何编写 javascript 循环的简单方法。

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>

Answer 1

我认为您使用多个函数的方法不是一个好主意。尽可能多地保留您的代码，这种重写更具可扩展性。

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>

如何循环播放 setTimeout 幻灯片 javascript

How can I loop setTimeout slideshow javascript

javascript

slideshow

settimeout