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

非常简单

添加c 计数器变量并使用s[c++%e]
而不是setTimeout使用.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>

... 甚至简单 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);

Javascript幻灯片背景图像按顺序

2 个答案: