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
Code:
<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
Code:
 $(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);
  }  
});