title: Add Fade Effect in Slideshow (Javascript)
body: <p>I have created a JavaScript Slideshow, but I don't know how to add the fade effect. Please tell me how to do it, and please tell in JavaScript only, no jQuery!</p>
  
  <p>Code:</p>
  
  <pre><code>var imgArray = [
      'img/slider1.jpg',
      'img/slider2.jpg',
      'img/slider3.jpg'],
      curIndex = 0;
      imgDuration = 3000;
  
  function slideShow() {
      document.getElementById('slider').src = imgArray[curIndex];
      curIndex++;
      if (curIndex == imgArray.length) { curIndex = 0; }
      setTimeout("slideShow()", imgDuration);
  }
  slideShow();
  </code></pre>