Question

我有一个像这样的方法：

     function randomHighlights() {
        loops++;
        var newRandom = Math.floor(Math.random() * 12 + 1);
        while (lastRandom == newRandom) {
          newRandom = Math.floor(Math.random() * 12 + 1);
        }
        lastRandom = newRandom;
        var li = $('#u-' + newRandom);
        $('#home-grid-list li').random().addClass(function() {
          var liClass = $(this).attr('class').split(/\s+/);;
          $('#home-grid-list li').removeClass('color-off');
          $('#home-grid-list li.' + liClass[0]).addClass('color-off');
          clearTimeout(timer);
        });
        $('#home-grid-list li').removeClass('text-on');
        timer = setTimeout(randomHighlights, 2500);
        if (loops == 20) {
          clearTimeout(timer);
          longHighlight();
        }
      }

一次突出显示4张图像。问题是我不再希望它是随机的，因为它只有3种不同的随机选择，显然它最终会多次选择相同的块来创建滞后效应。现在我想循环遍历#home-grid-list并循环突出显示它们。关于如何做到这一点的任何建议？

longHighlight()只会突出显示4张图片的随机区域，而不是返回此方法。

Answer 1

编辑：这更像是你的想法吗？

JS：

var items = $('#home-grid-list').children('li');
var len = items.length;
var arr = [0,1,2,3];

window.setInterval(cycle,1000);

function cycle() {
    items.removeClass('highlight');
    for (var i=0; i<4; i++) {
    var temp = arr.shift();
    arr.push(((temp+4<len)?temp+4:temp+4-len));
    }
    for (var i=0; i<4; i++) {
        items.filter('#u-'+arr[i]).addClass('highlight');   
    }
}

这是一个更新的fiddle。

这样的东西？

JS：

var items = $('#home-grid-list').children('li');
var len = items.length;
var arr = [0,1,2,3];

window.setInterval(cycle,1000);

function cycle() {
    items.removeClass('highlight');
    var temp = arr.shift();
    arr.push(((temp+4<len)?temp+4:temp+4-len));
    console.log(arr);
    for (var i=0; i<4; i++) {
        items.eq(arr[i]).addClass('highlight');   
    }
}

这里是fiddle。

Answer 2

使用模数根据计数器选择所需的颜色。模数运算符非常适合骑行。例如，如果您有一个0到9的计数器并使用模数4，您将得到以下数字集：

0 % 4 = 0
1 % 4 = 1
2 % 4 = 2
3 % 4 = 3
4 % 4 = 0
5 % 4 = 1
6 % 4 = 2
7 % 4 = 3
8 % 4 = 0
9 % 4 = 1

看看他们如何循环？

如何在没有随机的情况下循环？

2 个答案: