0

無限にループしたい画像の配列があります。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" />

しかし、私はまだ同じ問題を抱えています。何らかの理由で、画像リストの最後に到達するたびに、非表示フィールドの値を設定できず、無限ループが再開されません。

ここで明らかな何かが欠けていますか？これを機能させる方法がわからないようです。

誰かがこれを達成するためのより効率的な方法を持っているなら、あなたがそれを共有することができれば私も非常に感謝します:-)

ありがとう

4

5 に答える 5

2

だから私はあなたの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を使用できるようにするためにjQueryを渡す必要があります(function ($, window) { /* code goes here */ }( jQuery, window ));。

于 2012-05-30T19:51:09.673 に答える
1

私が正しく理解していれば、カウンターが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);

デモ

于 2012-05-30T19:20:42.250 に答える
1

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);
于 2012-05-30T19:20:31.487 に答える
1

最初の例では、次を変更します。

if(obj.currentValue == maxValue) {

に

if(obj.currentValue > maxValue) {

インデックス2は、0にリセットされていたため、処理できませんでした。

于 2012-05-30T19:23:25.610 に答える
1

2つのループを使用できます。

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

3つの画像パスを無期限に印刷します。

于 2012-05-30T19:25:10.500 に答える