Post
Ask Question

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:
  1. <img id="imgmain" style="border: medium solid #CC99FF; height: 180px; width: 499px"  
  2.             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:
  1. <img id="img1" src="Image/Circle.png"  style="height: 17px; width: 21px" /><img  
  2.          id="img2" src="Image/Circle.png" style="height: 17px; width: 21px" /><img  
  3.             id="img3" src="Image/Circle.png" style="height: 17px; width: 21px" /><img  
  4.             id="img4" src="Image/Circle.png" style="height: 17px; width: 21px" /><img  
  5.             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:
  1. <body onload="show()">  
  2. </body>  
  3. <script type="text/javascript" language='javascript'>  
  4.     function show()  
  5. {  
  6. document.getElementById('imgmain').src="Image/Desert.jpg";  
  7. document.getElementById('img2').src="Image/Circle.png";  
  8. document.getElementById('img3').src="Image/Circle.png";  
  9. document.getElementById('img4').src="Image/Circle.png";  
  10. document.getElementById('img5').src="Image/Circle.png";  
  11. document.getElementById('img1').src="Image/CircleFill.png";  
  12. setTimeout("show1()",2000);  
  13. }  
  14. </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:

ImageSld3.jpg
 
Step 5: After that, we write the code for other functions like this:
  1. function show1()  
  2. {  
  3. document.getElementById('imgmain').src="Image/Lighthouse.jpg";  
  4. document.getElementById('img1').src="Image/Circle.png";  
  5. document.getElementById('img3').src="Image/Circle.png";  
  6. document.getElementById('img4').src="Image/Circle.png";  
  7. document.getElementById('img5').src="Image/Circle.png";  
  8. document.getElementById('img2').src="Image/CircleFill.png";  
  9. setTimeout("show2()",2000);  
  10. }  
  11. function show2()  
  12. {  
  13. document.getElementById('imgmain').src="Image/Hydrangeas.jpg";  
  14. document.getElementById('img3').src="Image/CircleFill.png";  
  15. document.getElementById('img1').src="Image/Circle.png";  
  16. document.getElementById('img2').src="Image/Circle.png";  
  17. document.getElementById('img4').src="Image/Circle.png";  
  18. document.getElementById('img5').src="Image/Circle.png";  
  19. setTimeout("show3()",2000);  
  20. }  
  21. function show3()  
  22. {  
  23. document.getElementById('imgmain').src="Image/Jellyfish.jpg";  
  24. document.getElementById('img4').src="Image/CircleFill.png";  
  25. document.getElementById('img1').src="Image/Circle.png";  
  26. document.getElementById('img2').src="Image/Circle.png";  
  27. document.getElementById('img3').src="Image/Circle.png";  
  28. document.getElementById('img5').src="Image/Circle.png";  
  29. setTimeout("show4()",2000);  
  30. }  
  31. function show4()  
  32. {  
  33. document.getElementById('imgmain').src="Image/Koala.jpg";  
  34. document.getElementById('img5').src="Image/CircleFill.png";  
  35. document.getElementById('img1').src="Image/Circle.png";  
  36. document.getElementById('img2').src="Image/Circle.png";  
  37. document.getElementById('img3').src="Image/Circle.png";  
  38. document.getElementById('img4').src="Image/Circle.png";  
  39. setTimeout("show()",2000);  
  40. } 
The Output will be the Image Slider

ImageSld4.jpg


Similar Articles