Question

设定：

我有一组~20张图片。我想一次显示其中的6个，并使用jQuery Cycle插件随机旋转来自该组的不同图像。我拼凑了一个解决方案，我将Cycle插件调用了6次，并在6个div中分别列出了每个图像。目前的解决方案大致基于this question/answer。

问题：

我不希望显示重复的图像。现在经常会有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

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

1 个答案: