Home > Resource > Tips > How to Make a Simple Javascript Slideshow

How to Make a Simple Javascript Slideshow

Javascript, also known as js, is a web scripting language used to operate the DOM (Document Object Model) elements. It's a cross-platform technology to interact with objects in HTML. By accessing various different objects in HTML, you could even realize a simple Javascript slideshow with pure Javascript code.

This article will give you a simple Javascript slideshow example so that you can add an image slideshow to your website. You can control what and how many images to be included, as well as the slideshow speed. The only Fade transition effect is used for the Javascript slideshow. To gain more controls over the image slideshows, such as more transition effects, slideshow titles, image hyperlink, etc., you are recommended to use more powerful slideshow maker like Flash Gallery Factory, which immediately adds eye-catching shows to your website.

Download Win Version

You could also become an advanced Javascript programmer to extend javascript codes for a better javascript slideshow by learning Javascript Course on W3C.com. Now see how to set up a simple Javascript slideshow step by step.

1 Get started from JS slideshow code example

There is no need to write Javascript slideshow code from scratch. Here is a Javascript slideshow example (1kb, zip). Download and extract to your computer. We will simply modify it to suit your needs. You will get a single javascript-slideshow-example.html file.

2 Change the image name, image path, js slideshow speed

Open it with your favorite text editor and change it according to the notes included in the file.

  • To change slide duration, go to slideShowspeed parameter.
  • To add more images, just copy and paste Pic[0] = '1.jpg' line, and change the array number and image file name correspondingly. If your image are placed in a folder, e.g. images, use the related path like Pic[0] = 'images/1.jpg'. You could also use absolute image address here.

3 Embed Javascript slideshow to your web page

Now open the web page you want to embed a Javascript slideshow. Copy and paste the entire <script> tag to the place between <head> and </head>. Then let the page to start your Javascript slideshow when the page is loaded by adding onLoad="javaSlideShow()" attribute to the <body> tag. Finally, make the Javascript appear at the right position of the page. To do so, just put the code between <table> and </table> tags to where it should be.

4 Save and preview Javascript slideshow

OK, save it and preview. If everything goes right, you may see a Javascript slideshow as this.

Product-related questions? Speak directly to our Support Team >>

Does not work in internet explorer 10.. firefox, chrome are ok
works perfect in I.E 9

They're downloading



One-stop solution lets you manage your entire mobile lifestyle convenient.

MobileGo for Android Pro (Mac)

MobileGo for Android Pro (Mac)

Easily backup Android data & Manage your media files, contacts, text messages and apps on Mac!