Implementación de la función de reproducción aleatoria de imágenes

Im looking for some advice on how to start a shuffle image function, so I have 6 images atm in a div box and I want a function that allows them to shuffle around, how should I start?? Should I put the images in a separate div as well? any help or example code appreciated, thanks

preguntado el 10 de marzo de 12 a las 02:03

3 Respuestas

Following is a jQuery solution. You can achieve same results using vanilla JavaScript but it will require few extra lines of code.

<div id="deck">
  <div><img src="" /></div>
  <div><img src="" /></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;

Demo aquí

respondido 10 mar '12, 07:03

Salman A, thanks for this it works great however I have changed the code a bit and not sure how to change the shuffle function as it doesnt work any more, could you help? - user1259527

I've implemented something like this for a memory card game, so you can probably get some hints from that. Just do a resources search for 'shuffle' in my .js files and you should get an idea how I've done it. From memory, I originally put all my images in a div, then move them around with the shuffle function. I think later on I started shuffling an array of URLs instead then generating the image elements later.

I used Ca-Phun Ung's 'Shuffle' JQuery plugin (although I think I re-wrote my own version to better understand its inner workings). You may find some useful information with that as well. See JQuery Shuffle

respondido 10 mar '12, 03:03

Ok, I got this!

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( {

      // Swap the two divs

shuffle(divs, 1000);

Although this will probably be better if you put a divs.hide(), then so that you don't see the thrashing. However, maybe that is what you want? May you want a delay in there and use jQuery's animate function to make it fancy. This particular solution requires that the img's position in the DOM determines the location. A more complex solution would be to swap the css position during the loop.

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); 

I haven't actually TRIED this yet, but it looks right from here :P

respondido 10 mar '12, 06:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.