Slideshow using CSS and JavaScript

A simple slideshow for any number of images, with fade transitions between slides. Display and transition speeds are customizable for each design. This demo uses five photos of classic cars.

The Demo

The CSS

Web Designers!
Let us address your JavaScript issues so you can get back to your designing! Contact us for more information.

  .mssimage  { 
    border-width:1em 2em;
    border-color:#90B3F2;
    border-style:solid; 
    height:183px;
    opacity:1;
    transition-property:opacity;
  }
  .mssimage.noshow  {
    opacity:0;
  }

The HTML

  <div style="text-align:center" name="arbitraryDiv">
  <img src="images/camaro1.jpg" name="mssimage" class="mssimage" 
    alt="1968 Camaro" title="1968 Camaro">
  </div>

The Javascript

  var mssimages=new Array();
  function mssimageurls(){
    var ix;
    for (ix=0;ix<mssimageurls.arguments.length;ix++){
      mssimages[ix]=new Image();
      mssimages[ix].src=mssimageurls.arguments[ix];
    }
  }
  // image src list
  mssimageurls(
  "images/camaro1.jpg",
  "images/camaro2.jpg",
  "images/camaro3.jpg",
  "images/camaro4.jpg",
  "images/camaro5.jpg")
  var mssspeed=5000;  /* time that each image is to show */
  var mstspeed=1000;   /* time of the transition -- all times are in milliseconds*/
  var mssiximg=0;     
  function msschange(){
    document.images.mssimage.style.transitionDuration=(mstspeed/2000).toFixed(2)+'s'; 
    document.images.mssimage.className='mssimage noshow';
    setTimeout("msschange2()",mstspeed/2);  /* time to wait for fade to occur */
  }    
  function msschange2(){
    document.images.mssimage.src=mssimages[mssiximg].src;
    if (mssiximg==mssimages.length-1) {
      mssiximg=0;
    } else {
      mssiximg++;
    }
    document.images.mssimage.style.transitionDuration=(mstspeed/2000).toFixed(2)+'s';
    document.images.mssimage.className='mssimage';
    setTimeout("msschange()",mssspeed);
  }
  msschange();