DEMO

Question

我想开发一个JavaScript图像幻灯片，它将在4秒延迟后开始循环并永远循环。

这是我的剧本，请告诉我我的剧本中有什么问题。 HTML部分

<div id="slideshow_main"> <img id="im1" src="images/slideshow/101.jpg" alt="Image 1"/> <img id="im2" src="images/slideshow/102.jpg" alt="Image 2"/> </div>

JavaScript部分

<script type="text/javascript">
var image_no001 = document.getElementById("im1");
var image_no002 = document.getElementById("im2");

function slider(){ // Slider begin
       setInterval(
           function(){
          image_no001.style.display = "none";
       },2000);

       setInterval(
           function(){
          image_no002.style.display = "none";
       },4000);
} // Slider end

   setTimeout(slider(), 5000);
</script>

Answer 1

您需要将函数引用/名称传递给setTimeout而不是函数的输出。

setTimeout(slider, 5000);不是setTimeout(slider(), 5000);

slider()将调用该函数，并在setTimeout(slider(), 5000);中function slider的返回值，undefined将传递给setTimeout

setTimeout将在所需的时间调用该函数， 5000毫秒或OP中的5秒。

Answer 2

您应该执行以下操作：

DEMO

JS

var img0 = document.getElementById('img0');
img0.style.display = 'none';
var img1 = document.getElementById('img1');
img1.style.display = 'block';

setInterval(function () {
    img0.style.display = img0.style.display === 'none' ? 'block' : 'none';
    img1.style.display = img1.style.display === 'none' ? 'block' : 'none';
}, 3000);

HTML

<img src="http://lorempixel.com/400/200/cats/" alt="" id="img0">
<img src="http://lorempixel.com/401/201/cats/" alt="" id="img1">

JavaScript脚本中的幻灯片启动延迟

2 个答案:

DEMO

JS

HTML