Реализация функции воспроизведения в случайном порядке

Im ищет некоторые советы о том, как запустить функцию воспроизведения в случайном порядке, поэтому у меня есть 6 изображений atm в поле div, и я хочу функцию, которая позволяет им перемещаться вокруг, как мне начать? Должен ли я помещать изображения в отдельный div? любая помощь или примерный код оценены, спасибо

3 ответа

Ниже приведено решение jQuery. Вы можете достичь таких же результатов, используя ванильный JavaScript, но для этого потребуется несколько дополнительных строк кода.

<div id="deck"> . . .
</div>
// Fisher–Yates Shuffle (Knuth variant)
// To shuffle an array a of n elements (indices 0..n-1):
// for i from n - 1 downto 1 do
// j <- random integer with 0 <= j <= i
// exchange a[j] and a[i]
// jQuery specific:
// 1) remove elements from DOM and convert them into a native JavaScript array
// 2) apply algorithm
// 3) inject the array back to DOM
var a = $("#deck > div").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) { var j = Math.floor(Math.random() * (i + 1)); var bi = a[i]; var bj = a[j]; a[i] = bj; a[j] = bi;
}
$("#deck").append(a);

Демо здесь


Я реализовал что-то подобное для карточной игры, так что вы, вероятно, можете получить некоторые подсказки от этого. Просто выполните поиск ресурсов для "shuffle" в моих .js файлах, и вы должны понять, как я это сделал. Из памяти я первоначально поместил все мои изображения в div, а затем переместил их с помощью функции тасования. Я думаю, что позже я начал перетаскивать массив URL-адресов, а затем генерировал элементы изображения позже.

Я использовал плагин JQuery от Ca-Phun Ung 'Shuffle' (хотя, я думаю, я переписал свою собственную версию, чтобы лучше понять ее внутреннюю работу). Вы также можете найти полезную информацию. См. JQuery Shuffle


Хорошо, я получил это!

var divs = $('selector to get all divs'); // This could be $('img');
function shuffle(divs, iterations) { var size = divs.size(); for(var i = iterations; i > 0; i--) { // Pick two divs at random var div1 = divs[Math.floor(Math.random() * size)], div2 = divs[Math.floor(Math.random() * size)]; // Ensure they are different divs if(div1.is(div2)) { continue; } // Swap the two divs div1.clone().insertAfter(div2); div2.detach().insertAfter(div1); div1.detach(); }
};
shuffle(divs, 1000);

Хотя это, вероятно, будет лучше, если вы поместите divs .hide(), а затем divs .show(), чтобы вы не увидели избиение. Однако, может быть, это то, что вы хотите? Возможно, вы захотите задержать там и использовать функцию анимации jQuery, чтобы сделать ее фантазией. Это конкретное решение требует, чтобы позиция img в DOM определяла местоположение. Более сложным решением было бы поменять положение css во время цикла.

var savedLeft = div1.css("left"), savedTop = div1.css("top");
div1.css("left", div2.css("left"));
div1.css("top", div2.css("top"));
div2.css("left", savedLeft);
div2.css("top", savedTop);

На самом деле я еще НЕ ИСКЛЮЧАЛ это, но он выглядит прямо здесь: P

licensed under cc by-sa 3.0 with attribution.