最简单的图像旋转器 - 使用设置间隔失败

Simplest of Image Rotators - Failing with SetInterval

本文关键字：设置 失败 图像 旋转 最简单      更新时间：2023-09-26
最简单的

图像旋转器失败了，我怎样才能让它只循环穿过数组？ 

 $(document).ready(function () {
     var source = ["images/designers1.jpg","images/designers2.jpg","images/designers3.jpg"];
     i=0;
     setInterval(function(){
         $('.dimg').attr('src',source[i++])
     }, 2000);
 });

这有效：

$(document).ready(function () {
     var source = ["http://dummyimage.com/300x200/FFF/F00&text=GoodBye","http://dummyimage.com/300x200/000/fff&text=Hello"];
     var i=0;
     setInterval(function() {
         $('.dimg').attr('src', source[i++ % source.length])
     }, 2000);
 });

工作演示：http://jsfiddle.net/jfriend00/QXyjS/

变化：

  1. 每个图像仅在数组中出现一次。
    2. 数组的
  2. 索引是数组长度的模数，因此它永远不会超过数组的长度
  3. var 添加到 i 变量的前面，因此它不是全局的。

我假设你想要这样的东西：

 $(document).ready(function () {
     var source = ["images/designers1.jpg","images/designers2.jpg","images/designers1.jpg"];
     var idx = 0;
     function animate(idx) {
         idx++;
         if (idx >= source.length)
             idx = 0;
         $(".dimg").attr("src", source[idx]);
         setTimeout(function() {
             animate(idx);
         }, 2000);
     }
     animate(idx);
 });

[编辑] setInterval不好！使用递归setTimeout调用来避免一些令人讨厌的陷阱。也可以找到一个工作示例。

相关文章：