Image slideshow with Javascript

In this tutorial I’ll tell you how to create image slideshow with javascript.  This will be  ajax style slideshow i.e when you click next or previous image, no page reload will happen.

Firstly we have one image and 2 links ‘previous’   and  ‘next’   just like this one  you see in the picture:

All script logic is written in external javascript file script.js,  styles in style.css

When browser window loads we are initializing links , first line of script.js is this:

window.onload=initLinks;

initLinks is a function , in this function we are accessing link objects in html page  and setting handlers on  onclick event:

function initLinks()

{

document.getElementById(“prevLink”).onclick=prevPic;

document.getElementById(“nextLink”).onclick=nextPic;

}

Onclick event handlers are  precPic  and nextPic functions, these functions  will  show  next and previous images.

Let’s consider that our images are in  ‘images’  folder. Images’ sources are stored in array myPics:

var myPics=new Array(“images/0.jpg”, “images/1.jpg”, “images/2.jpg”, “images/3.jpg”, “images/4.jpg”, “images/5.jpg”);

And also we need one helper variable to store value of picture wich is currently watched : thisPic=0;

In function nextPic()  firstly we are incrementing current pictures array index then we are checking if index equals array’s  lenght it must be assigned ’0′

After setting array’s index we can access image in html page:

document.getElementById(“picture1″).src=myPics[thisPic];

and at the end of function we return false. This brings ajax style functionality, i.e when false is returned after clicking a link actually link won’t be followed!

function prevPic() is almost same.

script.js looks like this:

window.onload=initLinks;

var myPics=new Array(“images/0.jpg”, “images/1.jpg”, “images/2.jpg”, “images/3.jpg”, “images/4.jpg”, “images/5.jpg”);

thisPic=0;

function initLinks()

{

document.getElementById(“prevLink”).onclick=prevPic;

document.getElementById(“nextLink”).onclick=nextPic;

}

function nextPic()

{

thisPic++;

if(thisPic==myPics.length)

{

thisPic=0;

}

document.getElementById(“picture0″).src=myPics[thisPic];

return false;

}

function prevPic()

{

if(thisPic==0)

{

thisPic=myPics.length;

}

thisPic–;

document.getElementById(“picture0″).src=myPics[thisPic];

return false;

}

If you want to display more or less images in slideshow  only one line of this script needs change. Modify array and it’ll work.

Even more, maybe you want to  display ramdom images on some links click or page reload, if so   this function will help you:

function displayRandomImages()

{

randomNum=Math.floor((Math.random()*myPics.length));

document.getElementById(“picture0″).src=myPics[randomNum];

}