How to do Slide Show using JavaScript?

**Samarth** · 03-02-2010

Hi friends,
I am new to this forum, so please ignore my mistakes. I am doing JavaScript from last couple of months. Recently I came to know that we can do the Slide Show in JavaScript just as we do in PowerPoint. Is it possible to do exactly same.?? Please tell me how to do Slide Show using JavaScript? If possible, please provide me with the coding of the same.!!

**kelfro** · 03-02-2010

I would like to tell you that you can create a Web-Based image slideshows with some cool transition effects. These effects are similar to those of PowerPoint. In the JavaScript the slideshow cycles through the set number of images. And for doing this there is no need of reloading the rest of the page. The following are the four JavaScript functions which are used for this purpose :

previous_image() - This function displays the previous image.
next_image() - This function displays the next image.
image_effects() - Generates the different transition effects.
slideshow_automatic() - This function is useful for displaying the next image after a certain delay.

**Zecho** · 03-02-2010

You can use the following code for doing the Slide Show in JavaScript :

Code:

var image=new Array("pic1.jpg",
                    "pic2.jpg",
                    "pic3.jpg",
                    "pic4.jpg",
                    "pic5.jpg",
                    "pic6.jpg",
                    "pic7.jpg",
                    "pic8.jpg",
                    "pic9.jpg",
                    "pic10.jpg"
                    )

var num=0

var timeDelay

Preload Images
Preload the images in the cache so that the images load faster

var imagePreload=new Array()
for (i=0;i<image.length;i++)
{
   imagePreload[i]=new Image()

imagePreload[i].src=image[i]
}

Hope that you were looking for the same..!!

**Katty** · 03-02-2010

Its good option that we can do the slide show using the JavaScript. For doing this first you would have to start a blank document in Notepad or in HTML editor. Then you will have to mark up the document with basic HTML tags as follows :

HTML Code:

name="slideshow"
width=360
height=230>

Then you will have to create hyperlinks for the words "Next" and "Back". So that when the user clicks on either of these words, the clicking action calls the "doNext" and "doBack" functions will come into action. You can check that in a web browser after saving that file as HTML file.

**Praetor** · 03-02-2010

I think that till now you should have understood the concepts of the slide show that is used in JavaScript. Now I am providing you with JavaScript function that can do the cool transition when we move from one image to the next. Check the following code for that :

Code:

function image_effects()
{
  var selobj = document.getElementById('slideshow_transition');
  var selIndex = selobj.selectedIndex;

  slideShow.filters.revealTrans.Transition=selIndex
  slideShow.filters.revealTrans.apply()
  slideShow.filters.revealTrans.play()
  
}

**MindSpace** · 03-02-2010

You can also do the Automatic Slide Show in JavaScript.!! For doing that you will need to use the setTimeout() method to create the delay. The SetTimeout() method takes two parameters. The first parameter is a string where you use the JavaScript code after the time is expired. The second parameter is an integer that specifies the number of milliseconds. You can have a look on the coding that is been described below :

Code:

function slideshow_automatic()
{ 
if (slideshow.checked)
   {
    if (num<image.length)
     {
       num++

       if (num==image.length) 
       num=0
       image_effects()

       timeDelay=setTimeout("slideshow_automatic()",6000) 
       document.images.slideShow.src=image[num]   
     }
   }  
   if (slideshow.checked==false)
   { 

      clearTimeout(timeDelay)
   }
}

By using this code the slide show will get the time interval of 6 seconds.