Simple image slider with pure javascript


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <html>
  2. <head>
  3. <title>Sliding Images</title>
  4. <script type="text/javascript">
  5. //Create images Array
  6. var imgArr = new Array("images/img1.jpg",
  7. "images/img2.jpg",
  8. "images/img3.jpg");
  9.  
  10. var count = imgArr.length; // assign images array length
  11. var position = 0; //position is set to zero
  12.  
  13. function slidingImages() {
  14. if ( document.images ) {
  15. if ( position < count ) {
  16. imageSrc(position); // call the image source
  17. position += 1;
  18. } else {
  19. position = 0;
  20. imageSrc(position);
  21. }
  22. }
  23. setTimeout(slidingImages, 3000);
  24. }
  25.  
  26. function imageSrc(position) {
  27. document.banner.src = imgArr[position];
  28. }
  29. </script>
  30. </head>
  31. <body onload="slidingImages()">
  32. <img src="images/img1.jpg" name="banner"/>
  33. </body>
  34. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.