如何循环 setTimeout 幻灯片 javascript

问题描述

在function start(){我的javascript上我希望我的幻灯片就像它开始时一样，它会等待2s，然后它应该先用setTimeout(slide2,2000); 转到(slide2) 不用等那么久来自},8000);的“8秒”。

然后它将使用 setTimeout(slide3,4000); 转到 (slide3)（这意味着每张幻灯片等待 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>

解决方法

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

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>

javascript slideshow