使用js制作div幻灯片答案

【问题标题】：Making a div slide using js使用js制作div幻灯片
【发布时间】：2016-03-23 21:41:45
【问题描述】：

我知道这可能已经得到解答，但我无法找到一个完全适合我正在尝试做的事情。几乎我想在 2 秒后使用 js 将 div 滑到一边。这就是我现在所拥有的；

setTimeout("slide()", 1000)

function slide() {

  var myElement = document.querySelector("#box");
  myElement.style.left = 200px;

  setTimeout("slide()", 2000)

};

#box {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 300px;
  height: 300px;
  background: blue;
}

&lt;div id="box"&gt;box&lt;/div&gt;

任何我做错的事情或回答这个问题的链接都会有很大帮助！谢谢

【问题讨论】：

如果您指的是（最终）现有问题，请分享您的研究，并提供适当的参考资料和解释为什么现有解决方案不起作用或（不太喜欢）删除认为这些存在是因为用户必须为您完成这项工作，或者会（更有可能）否决您的问题。

标签： javascript html css interactive

【解决方案1】：

你在哪里：

myElement.style.left = 200px;

应该是：

myElement.style.left = '200px';

还有这个：

setTimeout("slide()", 2000);

真的应该是这样的：

setTimeout(slide, 2000);

【讨论】：

【解决方案2】：

setTimeout 将一个函数作为其第一个参数，但您传递一个字符串。即使它不是字符串，它也会失败，因为()

setTimeout 的正确使用方法是这样的：

setTimeout(slide, 1000);

function slide() {

  var myElement = document.querySelector("#box");
  myElement.style.left = '200px'; // Fix this too!

  setTimeout(slide, 2000)

};

【讨论】：

【解决方案3】：

没有正确使用setTimeout 函数。使用样式字符串。

setTimeout(function(){slide();}, 1000);
function slide() {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(function(){slide();}, 2000);
}

或者干脆

setTimeout(slide, 1000);
function slide() {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(slide, 2000);
}

为什么使用第一个选项？以这种方式传递参数：

setTimeout(function(){slide(2000);}, 1000);
function slide(delaytime) {
  var myElement = document.querySelector("#box");
  myElement.style.left = "200px";
  setTimeout(function(){slide(delaytime);}, delaytime);
}

【讨论】：