jQuery цикл плагин - отображать несколько изображений из одного набора без дубликатов - PullRequest
Новая
       18

jQuery цикл плагин - отображать несколько изображений из одного набора без дубликатов

1 голос
/ 01 ноября 2011

Настройка:

У меня есть набор из ~ 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 });
});

1 Ответ

0 голосов
/ 01 ноября 2011

Я мог бы создать временный массив для хранения случайно сгенерированных чисел, а затем проверять его каждый раз: 

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
...