Question

いくつかの画像を回転するには、次のコードがあります。ランダムではなく順番に画像を並べる必要があります。それを実現するためにコードを変更する必要があるのは何ですか？

<div class="test" 
data-slides='[ 
    "images/video/images/IMG_0001.jpg", 
    "images/video/images/IMG_0002.jpg", 
    "images/video/images/IMG_0003.jpg", 
    "images/video/images/IMG_0004.jpg", 
    "images/video/images/IMG_0005.jpg", 
    "images/video/images/IMG_0006.jpg", 
    "images/video/images/IMG_0007.jpg", 
    "images/video/images/IMG_0008.jpg", 
    "images/video/images/IMG_0009.jpg" 
]'></div> 

<script> 
! function(t) { 
"use strict"; 
var a = t("[data-slides]"), 
    s = a.data("slides"), 
    e = s.length, 
    n = function() { 
     a.css("background-image", 'url("' + s[Math.floor(Math.random() * e)] + 
      '")').show(0, function() { 
      setTimeout(n, 3.33e+2) 
     }) 
    }; 
n() 
}(jQuery); 
</script> 

Answer 1

非常に簡単

• .delay(2e3).show(0, n)

;(function(t) { 
 
    "use strict"; 
 
    var a = t("[data-slides]"), 
 
     s = a.data("slides"), 
 
     e = s.length, 
 
     c = 0,    // Add a counter 
 
     n = function() { 
 
     a.css("background-image", 'url("' + s[c++%e] + '")').delay(2e3).show(0, n); 
 
     }; 
 
    n(); 
 
}(jQuery));

[data-slides]{height:100vh;background: none 50%;background-size: cover;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="test" data-slides='[ 
 
"//placehold.it/800x600/0bf?text=1", 
 
"//placehold.it/800x600/fb0?text=2", 
 
"//placehold.it/800x600/f0b?text=3" 
 
]'></div>

を使用する代わりのsetTimeoutの s[c++%e]

を使用して、画像cカウンタ変数とループを追加

... のみ使用するアレイ上で動作しても、簡単な R：

var a = t("[data-slides]"), 
    s = a.data("slides"), 
    n = function() { 
     a.css("background-image", 'url("'+ s[0] +'")').delay(2000).show(0, n); 
     s.push(s.shift()); 
    }; 
n(); 

Answer 2

あなたは以下の配列.length

! function(t) { 
"use strict"; 
var a = t("[data-slides]"), 
    s = a.data("slides"), 
    e = s.length, 
    i = -1, 
    n = function() { 
     a.css("background-image", 'url("' + s[++i] +'")') 
     .show(0, function() { 
      if (i < e -1) { 
       setTimeout(n, 3.33e+2) 
      } 
     }) 
    }; 
n() 
}(jQuery); 

ながらインクリメントする変数を作成することができます