Very Simple Code to Create Photo Slideshow

Make a Slide Show and tell your story! Learn how easy it is to make a dynamic slide show with simple sample code. It is fast and easy! To create a very basic image slideshow is very simple. You can use your own pictures, photos and bellow javascript slideshow code as a sample to create image slideshow for websites easily.

Things you will need to do before hand:

1. Create a html document “sample.html”, a directory “images” under the same folder;

2. Copy or move your image files to the “images” directory.

Javascript slideshow code

Two steps to create basic photo slideshow

1.  Copy the sample slideshow code into the HEAD of your HTML document “sample.html”

—code section 1-javascript slideshow code—

<!-- Begin
NewImg = new Array (
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
//Time delay between Slides in milliseconds
var delay = 3000;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
if (ImgNum < 0) {
ImgNum = ImgLength;
document.slideshow.src = NewImg[ImgNum];
function auto() {
if (lock == true) {
lock = false;
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
//  End -->

—End of javascript slideshow code -section 1—

2.  Add the last sample slideshow code into the BODY of your HTML document

—Code section 2-javascript slideshow code—-

<img src="images/01.jpg" name="slideshow">
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
<td align="center"><a href="javascript:auto()">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>

—End of javascript slideshow code- section 2—

Save the HTML page, you are done. View it in browser as bellow:

javascript image slideshow code

Now you know how easy it is to make a dynamic slide show with sample javascript slideshow code. No complex coding, no flash knowledge, no flash tools, just your pictures and photos. Now try to create a slide show and tell your story. It is easy and Fun.

Other simple methods to Create Photo Slideshows

  • If you like to make more fancy photo slideshows with Flash transition, try this Flash gallery and slideshow maker. It offers a lot of templates and dynamic transition effects.
  • jQuery slideshows or sliders are very popular nowadays. They are lightweight, fast, compatible with mobile phones. With a jQuery slideshow template, you can make your own dynamic galleries without any coding knowledge. Here are some free jQuery slider templates you can download.

20 Responses

  1. Majid Shahmoradi says:

    Thank you very muchhhhhhhhhhhhhhh it’s great code

  2. Angry Bird says:

    Thank you very much…… After long time this code actually work……..

  3. Shelia says:

    Thank you, I’ve just been searching for the slideshow code for a while and yours is the best I have discovered so far.

  4. Yam says:

    Thank you so much for your code!!! it really works!!! I put the code into div and centered it, it is perfect!!!! thanks again for this fast and easy slide show!!!

  5. admin says:

    You are welcome.
    It is great to know this slideshow code is useful to you.