Slideshow and transition effects using JavaScript (JavaScript Programming Tutorial) • Geekpedia

Learn how to create a slideshow using JavaScript. It will feature next, previous, play, pause and resume buttons along with transition effects between pictures.

First let’s create the HTML elements that we will use for the slideshow. We need an image, four buttons and two divs:

<html>
<body onload="loadPics()">
<center>
<div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">
<img id="picture" name="picture" src="1.jpg" /></div><br />
<input id="prev" type="button" value="prev" onclick="prev()" />
<input id="next" type="button" value="next" onclick="next()" />
<input id="slideshow" type="button" value="slideshow" onclick="startSlide()" />
<input id="pause" type="button" value="pause" onclick="pause()" /><br />
<div id="number">Picture 1</div>
</center>
</body>
</html>

We will use the img tag to display the pictures in the slideshow. The image is wrapped inside a div, which has a filter CSS atribute. That filter will create the transition effect using DirectX; unfortunately browsers other than Internet Explorer do not support the DirectX filters applied here. The slideshow will still work, however there will be no transition effect between pictures. We could have declared the filter in the image tag instead of the div, then the transition would not work in Firefox at all. We also have four buttons for controlling the slideshow and another div that will display text (such as the title of the image).
Let’s move on to the script. First, we declare a few variables and make a function that preloads the pictures.

<script language="javascript" type="text/javascript">
<!--
   var i=0;
   var finished=false;
   var paused=false;
   var running=false;

   function loadPics()
   {
      pic0=new Image();
      pic0.src="1.jpg";
      pic1=new Image();
      pic1.src="2.jpg";
      pic2=new Image();
      pic2.src="3.jpg";
      pic3=new Image();
      pic3.src="4.jpg";
      pict=new Array();
      pict[0]=pic0.src;
      pict[1]=pic1.src;
      pict[2]=pic2.src;
      pict[3]=pic3.src;
   }

This function preloads the images and makes an array with them. We want this function to be called when the pages loads, so the body tag has the event: onload=”loadPics()”.

Now, we’ll write a function for the next button. The default picture is pict0 (1.jpg), so what we want is the image to display the next picture when we click next, and to display the first picture if we are at the end of the slideshow. For this function we’ll use the i variable, which is basicly the current picture, and an IF ELSE statement.

function next()

{
      finished=false;
      if(i<pict.length-1)
      {
      i++;
      document.getElementById('picture').src=pict[i];
      document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else
      {
      i=0;
      document.getElementById('picture').src=pict[i];
      document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }

You can see the finished variable, that’s there for the slideshow function, and will be explained later.
So, this is how this function works: when you click next, it checks what picture is currently displayed; if the picture is any other than the last one, i will be incremented by 1, the next picture will be displayed and the pictures’ name will be written in a div. If the last picture was displayed when the button was clicked, i will become 0, and the first picture will be displayed.

The prev function is pretty much the same. The difference is that the IF ELSE statement checks if the current picture is the first one. If the current picture is not the first picture, then the previous picture will be displayed, if it is the first picture, the last picture in the slideshow will be displayed.

function prev()

{
      finished=false;
      if (i>0)
      {
         i--;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else
      {
         i=pict.length-1;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }

The autoslideshow is next. First we’ll create a function that will call the actuall slideshow function at a certain interval. Also, because the transition does not work in Firefox, we’ll have to check the browser to see what function to call (there’s one for IE, and another one for the rest of the browsers).

function startSlide()

{
      running=true;
      if(navigator.appVersion.indexOf("MSIE") == -1)
      {
         interval = setInterval(FFSlideshow,5000);
      }
      else
      {
         interval = setInterval(slideshow,5000);
      }
      document.getElementById("slideshow").disabled=true;
      document.getElementById('number').innerHTML="Picture "+1*(i+1);
   }

The running variable shows that a slideshow is in progress, and it will be usefull for the pause function.
So, if the browser is IE, the slideshow function will be called after 5 seconds, if not, the FFSlideshow function will be called.

function slideshow()

{
      if (i<pict.length-1)
      {
         document.getElementById('pictureContainer').filters[0].Apply();
         document.getElementById("slideshow").disabled=true;
         i++;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
         document.getElementById('pictureContainer').filters[0].Play();
      }
      else if (i==pict.length-1 && finished==false)
      {
         document.getElementById("slideshow").disabled=false;
         document.getElementById('number').innerHTML="End of slideshow";
         finished=true;
         running=false;
         clearInterval(interval);
      }
      else
      {
         document.getElementById('pictureContainer').filters[0].Apply();
         i=0;
         finished=false;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
         document.getElementById('pictureContainer').filters[0].Play();
      }
   }

When this function is called it checks what is the current picture. If it’s any other than the last one, it will display the next picture, starting with a nice fade effect. i will be incremented by 1, and the startSlide function will call this function again after 5 seconds. This will go on until the last picture is displayed, then the timer will be cleared and the function will not be called again; finished will become true and running will become false. If the slideshow is started again, the current picture will be the last one and finished will not be false, so the code in the else body will be ran; the slideshow will go on until it reaches the last picture again: the timer will call this function until it’s been cleared again. I have used setInterval() instead of setTimeout() because it can be cleared, and this will prevent the slideshow from running more than desired (if you use setTimeout and pause the slideshow twice during the same picture, the slideshow will run twice).

The FFSlideshow function is the same, except it doesnt have filters (that makes Firefox not run the script).

function FFSlideshow()

{
      if (i<pict.length-1)
      {
         document.getElementById("slideshow").disabled=true;
         i++
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else if (i==pict.length-1 && finished==false)
      {
         document.getElementById("slideshow").disabled=false;
         document.getElementById('number').innerHTML="End of slideshow";
         finished=true;
         running=false
         clearInterval(interval);
      }
      else
      {
         i=0;
         finished=false;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }

Finally it’s time to write the pause function. We dont want to pause the slideshow when it’s not even running. So we have the running variable above that helps us know if the slide is running or not. We also want to resume the slideshow after it’s been paused, for this we have the paused variable above.

function pause()

 {
      if(running==true)
      {
         if(paused==false)
         {
            paused=true;
            document.getElementById("pause").value="resume";
            clearInterval(interval);
            document.getElementById('number').innerHTML="Paused";
         }
         else
         {
            startSlide()
            paused=false;
            document.getElementById("pause").value="pause";
         }
      }
   }

When the pause button has been clicked the function checks if a slideshow is running. If it’s not, then the function will do nothing. If a slideshow is running, it checks if it has been paused or not. If it hasn’t been paused, the function will pause the slideshow by clearing the setInterval. The button will say “resume” now and a div will say “Paused”. The paused variable is now true. So when the function is called again, it will run the other piece of code: it will call the startSlide() function (that will start a timer and call the slideshow function), will make the button say “pause” again and the paused variable will again be false.

And don’t forget to close the script:

//–>
</script>

You can copy the whole code from below and have the gallery up & running:

<html>
<head>
<script language="javascript" type="text/javascript">
<!--
   var i=0;
   var finished=false;
   var paused=false;
   var running=false;
   function loadPics()
   {
      pic0=new Image();
      pic0.src="1.jpg";
      pic1=new Image();
      pic1.src="2.jpg";
      pic2=new Image();
      pic2.src="3.jpg";
      pic3=new Image();
      pic3.src="4.jpg";
      pict=new Array();
      pict[0]=pic0.src;
      pict[1]=pic1.src;
      pict[2]=pic2.src;
      pict[3]=pic3.src;
   }
   function next()
   {
      finished=false;
      if(i<pict.length-1)
      {
         i++;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else
      {
         i=0;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }
   function prev()
   {
      finished=false;
      if (i>0)
      {
         i--;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else
      {
         i=pict.length-1;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }

   function startSlide()
   {
      running=true;
      if(navigator.appVersion.indexOf("MSIE") == -1)
      {
         interval = setInterval(FFSlideshow,5000);
      }
      else
      {
         interval = setInterval(slideshow,5000);
      }
      document.getElementById("slideshow").disabled=true;
      document.getElementById('number').innerHTML="Picture "+1*(i+1);
   }
   function slideshow()
   {
      if (i<pict.length-1)
      {
         document.getElementById('pictureContainer').filters[0].Apply();
         document.getElementById("slideshow").disabled=true;
         i++;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
         document.getElementById('pictureContainer').filters[0].Play();
      }
      else if (i==pict.length-1 && finished==false)
      {
         document.getElementById("slideshow").disabled=false;
         document.getElementById('number').innerHTML="End of slideshow";
         finished=true;
         running=false;
         clearInterval(interval);
      }
      else
      {
         document.getElementById('pictureContainer').filters[0].Apply();
         i=0;
         finished=false;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
         document.getElementById('pictureContainer').filters[0].Play();
      }
   }
   function FFSlideshow()
   {
      if (i<pict.length-1)
      {
         document.getElementById("slideshow").disabled=true;
         i++
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
      else if (i==pict.length-1 && finished==false)
      {
         document.getElementById("slideshow").disabled=false;
         document.getElementById('number').innerHTML="End of slideshow";
         finished=true;
         running=false
         clearInterval(interval);
      }
      else
      {
         i=0;
         finished=false;
         document.getElementById('picture').src=pict[i];
         document.getElementById('number').innerHTML="Picture "+1*(i+1);
      }
   }
   function pause()
   {
      if(running==true)
      {
         if(paused==false)
         {
            paused=true;
            document.getElementById("pause").value="resume";
            clearInterval(interval);
            document.getElementById('number').innerHTML="Paused";
         }
         else
         {
            startSlide()
            paused=false;
            document.getElementById("pause").value="pause";
         }
      }
   }
//-->
</script>
</head>
<body onload="loadPics()">
   <center>
      <div id="pictureContainer" style="width:560px; filter:progid:DXImageTransform.Microsoft.Fade(duration=1.0,overlap=1.0)">
         <img id="picture" name="picture" src="1.jpg" /></div><br />
         <input id="prev" type="button" value="prev" onclick="prev()" />
         <input id="next" type="button" value="next" onclick="next()" />
         <input id="slideshow" type="button" value="slideshow" onclick="startSlide()" />
         <input id="pause" type="button" value="pause" onclick="pause()" /><br />
      <div id="number">Picture 1</div>
   </center>
</body>
</html>