Advanced Search

Simple image slider with pure javascript

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

Expand | Embed | Plain Text

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.