Advanced Search

Loop Images in a HTML JavaSacript - WebDeveloper.com

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html lang="en"> 
  3. <head> 
  4. <title>rotate</title> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  6. <script type="text/javascript"> 
  7.  
  8. var pictureArchive= ['1.jpg','2.jpg','3.jpg','4.jpg']; 
  9.  
  10. window.onload=function() { 
  11.  var o=document.createElement('img'); 
  12.  o.setAttribute('id', 'image'); 
  13.  o.setAttribute('src', pictureArchive[0]); 
  14.  o.setAttribute('alt', ''); 
  15.  document.body.appendChild(o); 
  16.  rotate(pictureArchive.length); 
  17. } 
  18.  
  19. function rotate(idx) { 
  20.  if(idx>=pictureArchive.length) { 
  21.   idx=0; 
  22.  }
  23.  document.getElementById('image').src=pictureArchive[idx++];
  24.  timerID=setTimeout('rotate('+idx+')', 4000); 
  25. } 
  26. </script> 
  27. <style type="text/css"> 
  28. </style> 
  29. </head> 
  30. <body> 
  31. </body> 
  32. </html>

URL: http://www.webdeveloper.com/forum/showthread.php?t=186968

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.