How to: A JavaScript Sliding Gallery Like the Android

JavaScript supports a "slide" method that programmers use to create a sliding gallery of images similar to Android slideshow apps and screen layouts. This feature can be used to show a series of images in sequence. The slideshow automatically switches images in the gallery element, so users can see a selection of your best images without having to click through different pages. You can use multiple images in your slideshow.

Instructions

1. Open the file manager for your Web server and right-click on the page that you want to enhance with a slideshow feature. Click "Open With" and select your preferred editor.

2. Create the basic slideshow element. You use an image element to create a slideshow and set it to the first image you want to show. Insert the following code in the Web page where you want the slideshow to display and rename your image file accordingly:

   <img src="image1.jpg" name="slideshow">

3. Load each of the images that you want to display in the slideshow. Add the following code snippet to the JavaScript section of your page:

   var image1=new Image()
   image1.src="image1.jpg"
   var image2=new Image()
   image2.src="image2.jpg"

4. Set the timer for the slideshow to configure how long each image will display. This example sets the timer for 2,500 milliseconds or 2.5 seconds:

   setTimeout("slideit()",2500)

5. Add the "slideit" function to the Javascript section of your page. The function runs when the timeout is called. The following code creates the function:

   function slideit(){
   if (!document.images)
   return
   document.images.slide.src=eval("image"+step+".src")
   if (step<3)
   step++
   else
   step=1
   setTimeout("slideit()",2500)
   }

6. Slide to the next image after the timer triggers. The following code advances the slideshow to the next image in your list:

   document.images.slideshow.src=eval("image"+step+".src")

References

• JavaScript Kit: How to Create a Basic Slide Show