title: Random slideshow with fade
body: <p>I am doing a website, in the header of that website I want a "slideshow" that shows RANDOM images - this I already have with javascript.</p>
  
  <p>I want to have the images to FADE in/out in instead of just changing them.</p>
  
  <p>Other than that, I really want to know if there is any way I can make the script load pictures from a directory itself instead of I have to manually update the script each time I upload a picture. </p>
  
  <p>Can this even be done with javascript, php, css or jquery?
  Any alternatives? div change background random with fade? anything?</p>
  
  <p>Here is the code I am using now.. its changing pictures with no problem.</p>
  
  <pre><code>&lt;script language="javascript"&gt;
  
  var delay=1000 //set delay in miliseconds
  var curindex=0
  
  var randomimages=new Array()
  
  randomimages[0]="1.jpg"
  randomimages[1]="5.jpg"
  randomimages[2]="2.jpg"
  randomimages[3]="4.jpg"
  randomimages[4]="3.jpg"
  randomimages[5]="6.jpg"
  
  var preload=new Array()
  
  for (n=0;n&lt;randomimages.length;n++)
  {
  preload[n]=new Image()
  preload[n].src=randomimages[n]
  }
  
  document.write('&lt;img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'"&gt;')
  
  function rotateimage()
  {
  
  if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
  curindex=curindex==0? 1 : curindex-1
  }
  else
  curindex=tempindex
  
  document.images.defaultimage.src=randomimages[curindex]
  }
  
  setInterval("rotateimage()",delay)
  
  &lt;/script&gt;
  </code></pre>