jquery - 如何在每个 Royal Slider 开关上使用数组更改 CSS

Question

每次幻灯片切换时，我都在努力改变 HTML 块的颜色。我正在使用RoyalSlider，并且我有 5 种颜色要按顺序循环显示。

我目前的努力是这样的：

    // initialize slider
    var sliderInstance = $('#new-royalslider-1').data('royalSlider');

    // bind the rsBeforeAnimStart event
    sliderInstance.ev.on('rsBeforeAnimStart', function() {

        var colors = ["#000000","#464646","#999999"];

        for(var i=0; i<colors.length; i++) {
          $(".color-block").css('background', colors[i]);
        }

    });

使用此设置，我只得到 #999999 值，而不是在每次幻灯片更改时循环遍历数组。这是我正在工作的网站，仅供参考。

知道我在这里做错了什么吗？提前感谢您的帮助！对此，我真的非常感激！

Answer 1

使用当前幻灯片的索引，我们可以在动画更改时循环显示颜色。

// initialize slider and define colours
var sliderInstance = $('#new-royalslider-1').data('royalSlider'),
    colors = ["#000000","#464646","#999999"];

// bind the rsBeforeAnimStart event
sliderInstance.ev.on('rsBeforeAnimStart', function() {
    $(".color-block").css('background', colors[sliderInstance.currSlideId % colors.length]);
});