A Simple Image Slider in JavaScript

Mahak Gupta
12y
39.2k
0
0

Article

Image Slider In JavaScript.rar

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 an 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:

Up Next

Ebook Download

View all

C# Corner Ebook

JavaScript Interview Q & A

Read by 40 people

Download Now!

Learn

View all

Learn Image