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

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.