Multi instance image fade

JavaScript
1

I have a multiple image fade on a page. Below is the code. There are three images on the page, and they fade one-by-one in a random order.

This is my question:
• How would I need to change the JavaScript so that the image change doesn’t happen on the same image in a row. Currently an image might be randomly selected to fade again.

And another one:
• And how would it work if I wanted the images to fade in order one after the other?(I still want the image selection to happen randomly)

Many thanks for any help. Unfortunately I’m good at HTML/CSS but haven’t got to grips with JS yet.

HTML

<div class="rotator-wrapper">
  <ul id="rotator">

    <li>
<img class="rotator-image img1" src="http://localhost/~T1/quartet/img/header/31.jpg">
<img class="rotator-image img2" src="http://localhost/~T1/quartet/img/header/32.jpg">
<img  class="rotator-image img3" src="http://localhost/~T1/quartet/img/header/33.jpg">
<img class="rotator-image img4" src="http://localhost/~T1/quartet/img/header/34.jpg">
<img  class="rotator-image img5" src="http://localhost/~T1/quartet/img/header/35.jpg">
    </li>

        <li>
<img class="rotator-image img1" src="http://localhost/~T1/quartet/img/header/21.jpg">
<img class="rotator-image img2" src="http://localhost/~T1/quartet/img/header/22.jpg">
<img  class="rotator-image img3" src="http://localhost/~T1/quartet/img/header/23.jpg">
<img class="rotator-image img4" src="http://localhost/~T1/quartet/img/header/24.jpg">
<img  class="rotator-image img5" src="http://localhost/~T1/quartet/img/header/25.jpg">
    </li>

        <li>
<img class="rotator-image img1" src="http://localhost/~T1/quartet/img/header/11.jpg">
<img class="rotator-image img2" src="http://localhost/~T1/quartet/img/header/12.jpg">
<img  class="rotator-image img3" src="http://localhost/~T1/quartet/img/header/13.jpg">
<img class="rotator-image img4" src="http://localhost/~T1/quartet/img/header/14.jpg">
<img  class="rotator-image img5" src="http://localhost/~T1/quartet/img/header/15.jpg">
<img class="rotator-image img6" src="http://localhost/~T1/quartet/img/header/16.jpg">
<img class="rotator-image img7" src="http://localhost/~T1/quartet/img/header/17.jpg">
          <img class="rotator-image img8" src="http://localhost/~T1/quartet/img/header/18.jpg">
    </li>

  </ul>
</div>

JS

 $(function(){
  // time between image rotate
  var delay = 2500;

  // for each list item in
  // the rotator ul, generate
  // show a random list item
  $('#rotator > li').each(function(){
    // save images in an array
    var $imgArr = $(this).children();
    // show a random image
    $imgArr.eq(Math.floor(Math.random()*$imgArr.length)).show();
  });
  // run the changeImage function after every (delay) miliseconds
  setInterval(function(){
    changeImage();
  },delay);

  function changeImage(){
    // save list items in an array
    var $liArr = $('#rotator > li');
    // select a random list item
    var $currLi = $liArr.eq(Math.floor(Math.random()*$liArr.length));
    // get the currently visible image
    var $currImg = $('.rotator-image:visible', $currLi);
    if ($currImg.next().length == 1) {
      var $next = $currImg.next();
    } else {
      var $next = $('.rotator-image:first', $currLi);
    }
    $currImg.fadeOut(1500);
      $next.fadeIn(1500);
  }
});
2

You can use a random bag. so that each item is referenced in an array, which you then shuffle, and then remove the first item from that array whenever you want the next random item from it. For example, see: http://jsperf.com/random-grab-bags

The standard way of doing that is to give the code that’s doing the fading a callback function, so that once the fading is complete, that fading code can then call the callback function to trigger the next stage of things.
An example of how to do callbacks can be found at http://www.impressivewebs.com/callback-functions-javascript/