Click here to Skip to main content
15,392,261 members
Articles / Web Development / HTML
Posted 10 Nov 2005


48 bookmarked

Web-Based Image Slideshow using JavaScript

Rate me:
Please Sign up or sign in to vote.
4.12/5 (21 votes)
10 Nov 20051 min read
A simple tutorial illustrating how to create web-based image slideshow with some cool transition effects.

Image 1


This is a simple tutorial illustrating how to create Web-Based image slideshows with some cool transition effects similar to those found in Microsoft's PowerPoint. The slideshow cycles through the set number of images without having to reload the rest of the page. There are about 23 different transitions to choose from. There is also an option which chooses a number at random from the other 23 transitions. These transitions can also be applied to images by triggering small snippets of JavaScript.

Four small JavaScript functions are used for this:

  • image_effects(): Generates the different transition effects.
  • previous_image(): Displays the previous image.
  • next_image(): Displays the next image.
  • slideshow_automatic(): Displays the next image after a certain delay.

Create image list and preload images

Create a list of images to display in the slideshow:

//creating a array of the image object
var image=new Array("images/image1.jpg",
//variable that will increment through the images
var num=0
// set the delay between images
var timeDelay

Preload Images
Preload the images in the cache so that the images load faster
//create new instance of images in memory 
var imagePreload=new Array()
for (i=0;i<image.length;i++)
   imagePreload[i]=new Image()
// set the src attribute

Image effects

The following JavaScript function renders the cool transition when we move from one image to the next. This is accomplished by using a visual filter - RevealTrans, which specifies which of the twenty-three available transition types should be used (0-22). Using the apply() and play() methods of the filter, we can invoke the transition.

//function for the transition effects
function image_effects()
  var selobj = document.getElementById('slidehow_transition');
  var selIndex = selobj.selectedIndex;
  //set the transition to the number selected in the list

Slideshow manually

Use the Next and the Previous buttons to manually start the slideshow. The previous_image() and Next_image() functions are pretty straightforward.

//function to get the previous image in the array
function previous_image()
  //code to execute only when the automatic slideshow is disabled 
   if (slideshow.checked==false)
    if (num>0)
       //set the SRC attribute to let the browser load the preloaded images 
    if (num==0)
    {  //if first image is displayed
//function to get the next image in the array
function next_image()
  //code to execute only when the automatic slideshow is disabled 
  if (slideshow.checked==false)
    if (num<image.length)
       //if last image is reached,display the first image
       if (num==image.length) 
        //set the SRC attribute to let the browser load the preloaded images 

Automatic slideshow

Finally, this code changes the images after a certain time. For this, we use the setTimeout() method to create the delay. SetTimeout() takes two parameters. The first parameter is a string that is a snippet of JavaScript code executed when the specified interval has elapsed. The second parameter is an integer that specifies the number of milliseconds.

//for automatic Slideshow of the Images
function slideshow_automatic()
if (slideshow.checked)
    if (num<image.length)
       //if last image is reached,display the first image
       if (num==image.length) 
       //sets the timer value to 4 seconds, 
       //we can create a timing loop 
       //by using the setTimeout method
   if (slideshow.checked==false)
     //Cancels the time-out that was set with the setTimeout method. 


Overall, this is a very simple script, you can copy the same and paste it wherever you want. No sweat!


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

K Baruah
Software Developer (Senior)
United States United States
KB is presently working as a Siebel Analyst in a MNC

Comments and Discussions

Questionslideshow not defined Pin
Member 1168423818-May-15 1:50
MemberMember 1168423818-May-15 1:50 
Questionquestion Pin
Member 1098581320-Aug-14 2:15
MemberMember 1098581320-Aug-14 2:15 
Questionslideshow using images from database Pin
faizel s13-Aug-13 22:18
Memberfaizel s13-Aug-13 22:18 
QuestionThis is very good article. Pin
Jayesh Sorathia22-Feb-13 20:33
MemberJayesh Sorathia22-Feb-13 20:33 
GeneralMy vote of 4 Pin
Zandile Dlamini10-Sep-12 21:28
MemberZandile Dlamini10-Sep-12 21:28 
Generalsetimtout problem Pin
Ajay Kale New30-Aug-10 23:26
MemberAjay Kale New30-Aug-10 23:26 
GeneralMy vote of 5 Pin
nithyanandan L7-Aug-10 9:06
Membernithyanandan L7-Aug-10 9:06 
Generalthanks but Pin
alabbasi9-Mar-10 2:29
Memberalabbasi9-Mar-10 2:29 
QuestionHow to use it for mozilla Pin
upenderkumar30-Sep-08 20:14
Memberupenderkumar30-Sep-08 20:14 
GeneralHmmm, seems like another demo ..... Pin
fwsouthern18-Nov-05 15:20
Memberfwsouthern18-Nov-05 15:20 
GeneralRe: Hmmm, seems like another demo ..... Pin
shellom20051-May-09 6:08
Membershellom20051-May-09 6:08 
GeneralRe: Hmmm, seems like another demo ..... Pin
fwsouthern1-May-09 8:12
Memberfwsouthern1-May-09 8:12 
GeneralMake it to be an Custom Control Pin
aDaNG Bryen15-Nov-05 16:11
MemberaDaNG Bryen15-Nov-05 16:11 
GeneralRe: Make it to be an Custom Control Pin
shellom20051-May-09 6:10
Membershellom20051-May-09 6:10 
GeneralInternet Explorer only Pin
latta15-Nov-05 14:28
Memberlatta15-Nov-05 14:28 
GeneralRe: Internet Explorer only Pin
KoiralaKiran21-Oct-09 8:55
MemberKoiralaKiran21-Oct-09 8:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.