Slider random (first image random too) and no repeat any image till all have been appeared once - Javascript

I know there are other posts with similar questions but I can't figure out how to modify my code to work well. I don't know well javascript and it's hard for me to understand. The thing is that I have an slide with random images. But the first image is always the same and I want it random too. And the images appear repeteadly and I want them to repeat only when all have been appeared once.

Someone can help me?

The js code I have:

var contador=1;
function slide(){
var element=document.getElementById('fons').getElementsByTagName('li');
var posicio="";
var aleatori=Math.floor((Math.random()*element.length)+1);
for(i=0;i<element.length;i++){
    if(element[i].className=="on"){
        element[i].className='off';
        posicio=i;
    }
}
if(aleatori){
    element[aleatori-1].className="on";
}
return false;
}

window.onload=function(){
setInterval(slide,5000);
}

Here is the HTML code:

<ul id="fons">
  <li class="on"><img src="imgs/pcompleta/papallones.jpg" alt="" title=""/></li>
  <li class="off"><img src="imgs/pcompleta/exvot.jpg" alt="" title=""/></li>
  <li class="off"><img src="imgs/pcompleta/batecs.jpg" alt="" title=""/></li>
  <li class="off"><img src="imgs/pcompleta/mama.jpg" alt="" title=""/></li>
  <li class="off"><img src="imgs/pcompleta/font.jpg" alt="" title=""/></li>
  <li class="off"><img src="imgs/pcompleta/exvot.jpg" alt="" title=""/></li>
  <li class="off"><img src="imgs/pcompleta/florits.jpg" alt="" title=""/></li>
  <li class="off"><img src="imgs/pcompleta/rastre.jpg" alt="" title=""/></li>
</ul>