jQuery 循环插件 - 显示来自同一组的多个图像，不重复

Question

设置：

我有一组约 20 张图像。我想一次显示 6 个图像，并使用 jQuery Cycle 插件随机旋转该组中的不同图像。我拼凑了一个解决方案，我多次调用 Cycle 插件 6 次，并将每个图像都列在 6 个 div 中。当前的解决方案大致基于 这个问题/答案。

问题：

我不想显示重复的图像。现在经常会同时显示 2 个甚至 3 个重复项。这看起来相当愚蠢！我假设这将涉及根据显示的图像对数组进行某种形式的重写（有办法告诉吗？），但我真的不知道如何去做。

任何帮助将不胜感激！谢谢你！

当前代码：

$(document).ready(function(){
    var NumImages = 20, // Number of logos to show
        FirstPart = '<img src="/DEV/demo/images/',
        LastPart = '.jpg" height="50" width="100" />',
        array = ['bali.sm',          'disney.sm', 'fisherprice.sm',
                 'fruit.of.loom.sm', 'gerber.sm', 'hamilton.beach.sm',
                 'hotwheels.sm',     'igloo.sm',  'magnavox.sm',
                 'matchbox.sm',      'mohawk.sm', 'playtex.sm',
                 'purina.sm',        'rca.sm',    'remington.sm',
                 'rubbermaid.sm',    'shark.sm',  'sony.sm',
                 'sunbeam.sm',       'tonka.sm'], // array with all image names
        rnd, value, i;

    for (i = 0; i < NumImages; i++) { // pick numbers
        rnd = Math.floor(Math.random() * array.length); 
        value = array.splice(rnd,1)[0]; // remove the selected number from the array and get it in another variable

        document.getElementById('pic1').innerHTML += (FirstPart + value + LastPart);
        document.getElementById('pic2').innerHTML += (FirstPart + value + LastPart);
        document.getElementById('pic3').innerHTML += (FirstPart + value + LastPart);
        document.getElementById('pic4').innerHTML += (FirstPart + value + LastPart);
        document.getElementById('pic5').innerHTML += (FirstPart + value + LastPart);
        document.getElementById('pic6').innerHTML += (FirstPart + value + LastPart);
    }
    $("#pic1").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: -15000 });
    $("#pic2").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: -10000 });
    $("#pic3").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: -5000 });
    $("#pic4").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: 0 });
    $("#pic5").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: 5000 });
    $("#pic6").cycle({ fx: 'fade', speed: 2000, timeout: 28000, random: 1, delay: 10000 });
});

Answer 1

我可能会构建一个临时数组来存储随机生成的数字，然后每次检查它：

var tmparray = [];
for (var i=0; i<NumImages; i++) { // pick numbers
    rnd = -1; 
    while (tmparray.indexOf(rnd) == -1) {
        rnd = Math.floor(Math.random() * array.length); 
    }
    tmparray.push(rnd);
    value = array.splice(rnd,1)[0];

    ...

} // end for