基本的幻灯片程序

Basic slideshow program

本文关键字：程序 幻灯片      更新时间：2023-09-26

这只是一个使用 js 的基本幻灯片，但我没有得到输出。我希望它执行自动幻灯片放映，如果我将jquery脚本添加到我的程序中。请帮帮我

<script>
var images = new Array(); 
images[0] = new Image(); 
images[0].src = "first.jpg"; 
images[1] = new Image();
images[1].src = "second.jpg";
images[2] = new Image();
images[2].src = "third.jpg";
</script>
</head>
<body>
<img src="first.jpg" id="slide" width="500" height="500" />
<script type="text/javascript">

var step=0;
function slideit(){
 document.getElementById('slide').src = images[step].src;
 if (step<2)
  step++;
 else
  step=0;
 setTimeout("slideit()",2500);
}
slideit();
</body>

你需要使用 setInterval() 而不是 setTimeout() ，你的代码也可以简化为以下内容。

var images = ['http://dummyimage.com/300x100/025870/fff', 'http://dummyimage.com/300x100/456e02/fff', 'http://dummyimage.com/300x100/6e2b02/fff'];
var step = 0;
setInterval(function() {
  document.getElementById('slide').src = images[step++ % images.length];
}, 2500);
<img src="http://dummyimage.com/300x100/025870/fff" id="slide" width="300" height="100" />

注意模数（ % ） 的使用。为了更好地理解它，以下是正在发生的事情：

      
        第一次迭代： （步骤++ % 图像.长度） ⇒ （0 % 3） ⇒ 0， 第 2次迭代： （step++ % images.length） ⇒ （1 % 3） ⇒ 1，  第 3次迭代： （步骤++ % 图像.长度） ⇒ （2 % 3） ⇒ 2，  第 4次迭代： （步骤++ % 图像.长度） ⇒ （3 % 3） ⇒ 0，  第 5次迭代：（步骤++%图像长度）⇒（4 % 3）⇒1，依此类推...

每次step的值可被图像数整除时，如果回滚到 0 。

相关文章：