how to interchage image banners randomly when page refresh?

Question

here are my banners:

pls help me with this. i want that when the page loads, every banners exchange places in any order.

i am using apache velocity for this but i just want to know the logic on how to code it. thanks

Answer 1

If your banner are images, you could create a JS array with all your images, randomize it and then change your img sources.

For exemple :

<img id="banner1" src="" />
<img id="banner2" src="" />
<img id="banner3" src="" />

<script>
    var images = ["http://exemple.com/banner1", "http://exemple.com/banner2", "http://exemple.com/banner3"];
    images = shuffle(images);
    $('#banner1').attr('src', images[0]);
    $('#banner2').attr('src', images[1]);
    $('#banner3').attr('src', images[2]);

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
</script>