A Simple Image Slider in JavaScript

Introduction

Here we discuss a simple example of an Image Slider In JavaScript. For this, follow these steps:

Step 1: First we take an image in the <body> tag:

<img id="imgmain" style="border: medium solid #CC99FF; height: 180px; width: 499px"
src="Image/Chrysanthemum.jpg" />

Here we take an Image Folder and save our images in it.

Step 2: Now we take two images and add it in the Image Folder:

Step 3: After that, we take some images:

<img id="img1" src="Image/Circle.png" style="height: 17px; width: 21px" /><img
id="img2" src="Image/Circle.png" style="height: 17px; width: 21px" /><img
id="img3" src="Image/Circle.png" style="height: 17px; width: 21px" /><img
id="img4" src="Image/Circle.png" style="height: 17px; width: 21px" /><img
id="img5" src="Image/Circle.png" style="height: 17px; width: 21px" />

The output will be

Step 4: After that, we call the function on the <body> onload() method like this:

<body onload="show()">
</body>
<script type="text/javascript" language='javascript'>
function show()
{
document.getElementById('imgmain').src="Image/Desert.jpg";
document.getElementById('img2').src="Image/Circle.png";
document.getElementById('img3').src="Image/Circle.png";
document.getElementById('img4').src="Image/Circle.png";
document.getElementById('img5').src="Image/Circle.png";
document.getElementById('img1').src="Image/CircleFill.png";
setTimeout("show1()",2000);
}
</script>

Here we set the Image Source(imgmain) and the source of the other images.

Here we call another function (Show1()) in the setTimeout. This function is basically used to call the other function after a particular time period.

Here we set the Image(img1) sourc (CircleFill.png) and the source of other images(Circle.png). So the Output Will be:

Step 5: After that, we write the code for other functions like this:

function show1()
{
document.getElementById('imgmain').src="Image/Lighthouse.jpg";
document.getElementById('img1').src="Image/Circle.png";
document.getElementById('img3').src="Image/Circle.png";
document.getElementById('img4').src="Image/Circle.png";
document.getElementById('img5').src="Image/Circle.png";
document.getElementById('img2').src="Image/CircleFill.png";
setTimeout("show2()",2000);
}
function show2()
{
document.getElementById('imgmain').src="Image/Hydrangeas.jpg";
document.getElementById('img3').src="Image/CircleFill.png";
document.getElementById('img1').src="Image/Circle.png";
document.getElementById('img2').src="Image/Circle.png";
document.getElementById('img4').src="Image/Circle.png";
document.getElementById('img5').src="Image/Circle.png";
setTimeout("show3()",2000);
}
function show3()
{
document.getElementById('imgmain').src="Image/Jellyfish.jpg";
document.getElementById('img4').src="Image/CircleFill.png";
document.getElementById('img1').src="Image/Circle.png";
document.getElementById('img2').src="Image/Circle.png";
document.getElementById('img3').src="Image/Circle.png";
document.getElementById('img5').src="Image/Circle.png";
setTimeout("show4()",2000);
}
function show4()
{
document.getElementById('imgmain').src="Image/Koala.jpg";
document.getElementById('img5').src="Image/CircleFill.png";
document.getElementById('img1').src="Image/Circle.png";
document.getElementById('img2').src="Image/Circle.png";
document.getElementById('img3').src="Image/Circle.png";
document.getElementById('img4').src="Image/Circle.png";
setTimeout("show()",2000);
}

The Output will be the Image Slider