Question

我有一系列想要无限循环的图像，即。 1,2,3,1,2,3 ......

首先，我尝试使用以下代码执行此操作：

var images = [
  "/images/image1.jpg",
  "/images/image2.jpg",
  "/images/image3.jpg"
];

var obj = { currentValue: 0 };
var maxValue = 2;            

//loop through the items
var infiniteLoop = setInterval(function() {
  if(obj.currentValue == maxValue) { 
    obj.currentValue = 0;                                           
  }

  // ... Code to fade in currentItem ...

  obj.currentValue++;
}, 5000);

我读过这是通过引用传递变量的正确方法但是出于某种原因，当所有图像都已遍历时，我永远无法将obj.currentValue设置回0。

我认为另一种方法是设置html字段的值：

var images = [
  "/images/image1.jpg",
  "/images/image2.jpg",
  "/images/image3.jpg"
];

var maxValue = 2;            

//loop through the items
var infiniteLoop = setInterval(function() {
  if(parseInt($('#currentItem').val()) == maxValue) { 
    $('#currentItem]').val('0');                                           
  }

  //... code to fade in currentItem ...

  var tmp = parseInt($('#currentItem').val());
  tmp++;                                  
  $('#currentItem').val(tmp);
}, 5000);

<input type="hidden" id="currentItem" name="currentItem" value="0" />

但是我仍然遇到同样的问题。出于某种原因，每当我点击图像列表的末尾时，我都无法设置隐藏字段的值，而我的无限循环永远不会重新启动。

我错过了一些明显的东西吗？我似乎无法弄清楚如何使这个工作。

如果有人有更有效的方法来实现这一点，我也非常感激你能分享它： - ）

由于

Answer 1

所以我重写了你的js，并评论了如何/为何做事

// Give your code a unique namespace using an immediately/self invoked annonymous function
(function (window) {

    // For better management we could use some more variables
    // slider.images.length replaces maxvalue
    var slider = { 
        images: [
          "/images/image1.jpg",
          "/images/image2.jpg",
          "/images/image3.jpg"
        ], 
        current: 0, // name your variables semantically, we know this is going to have a value so don't 'append' things to the name that are obvious
        time: 5000
    };

    // separated the function so we DRY
    function rotate() {
        // Remember that the images array is 0 indexed and length gives the total amount of 
        // items in the array which will be one more, if they're the same then we reset 
        // current to 0
        if(slider.current == slider.images.length)
            slider.current = 0;

        // Code to do w/e
        console.log(slider.images[slider.current], slider.current);

        slider.current++;
        window.loop = setTimeout(rotate, slider.time);
    }

    // only thing about intervals really, they never stop, and can never be stopped
    // so better thing to do is use a recursive timeout, and ideally it should be available 
    // somehow so you can stop it outside of the script itself, in this case we put the 
    // reference on window. (which is not ideal, anywhere else it makes sense is better)
    window.loop = setTimeout(rotate, slider.time);

}( window ));

这里是jsFiddle：

http://jsfiddle.net/sg3s/RGQxY/5/

你正在使用jquery来做事情，这很好，但你必须传递jQuery才能在内部使用它，立即调用包装器可能看起来像这样的函数：(function ($, window) { /* code goes here */ }( jQuery, window ));。< / p>

Answer 2

setInterval有时无法正常工作。你尝试过setTimeout吗？您可以执行以下操作，看看它是否有效：

var images = [
  "/images/image1.jpg",
  "/images/image2.jpg",
  "/images/image3.jpg"
];

var obj = { currentValue: 0 };
var maxValue = 2;            

function fn() {
  if(obj.currentValue == maxValue) { 
    obj.currentValue = 0;                                           
  }

  // ... Code to fade in currentItem ...

  obj.currentValue++;
  setTimeout(fn,5000);

}

//loop through the items
var infiniteLoop = setTimeout(fn,5000);

Answer 3

如果我理解正确，你想在计数器达到maxValue时循环播放..尝试如下，

var images = [
  "/images/image1.jpg",
  "/images/image2.jpg",
  "/images/image3.jpg"
];

var maxValue = 2,
    counter = 0;

var infiniteLoop = setInterval(function() {
    var curIndex = (counter++ % (maxValue + 1));
}, 5000);

DEMO

Answer 4

在您的第一个示例中，更改：

if(obj.currentValue == maxValue) {

到

if(obj.currentValue > maxValue) {

实际上，它无法处理索引2，因为它被重置为0。

Answer 5

可以使用两个循环。

while (1==1) 
{ // infinite loop
    for (int i = 0; i < images.length; i++) 
    { // loop images array
        console.log(images[i]);
    }
}

无限打印三个图像路径。

我该如何处理这个jquery循环？

5 个答案: