Reader Level:
ARTICLE

A Simple Image Slider in JavaScript

Posted by Mahak Gupta Articles | JavaScript May 16, 2012
Here we discuss a simple example of an Image Slider In JavaScript.
  • 0
  • 0
  • 27222
 

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:

ImageSld1.jpg

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:

ImageSld2.jpg

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:

ImageSld3.jpg

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:

ImageSld4.jpg
 

COMMENT USING

Trending up