Javascript Slideshow

 

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Javascript Slideshow Demo :: JoomlaTuts.net</title>
  6. <style>
  7. ul{ display: none; }
  8. </style>
  9. <script>
  10. var $ = function(id){
  11. return document.getElementById(id);
  12. }
  13. window.onload = function(){
  14. var linkListNode = $("imageList");
  15. var captionNode = $("caption");
  16. var imageNode = $("image");
  17. var imageList = linkListNode.getElementsByTagName("a");
  18. var i, image, linkNode;
  19. var imageArray = [];
  20. for(i = 0; i < imageList.length; i++){
  21. linkNode = imageList[i];
  22. image = new Image();
  23. image.src = linkNode.getAttribute("href");
  24. image.title = linkNode.getAttribute("title");
  25. imageArray.push(image);
  26. }
  27. var counter = 0;
  28. var timer = setInterval(function(){
  29. counter = (counter + 1) % imageArray.length;
  30. image = imageArray[counter];
  31. captionNode.firstChild.nodeValue = image.title;
  32. imageNode.src = image.src;
  33. },2000);
  34.  
  35. }
  36. </script>
  37. </head>
  38. <body>
  39. <h1>Javascript Slideshow Demo</h1>
  40. <section>
  41. <ul id="imageList">
  42. <li><a href="images/1.jpg" title="Nokia Mobile"></a></li>
  43. <li><a href="images/2.jpg" title="LG Mobile"></a></li>
  44. <li><a href="images/3.jpg" title="Blackberry Mobile"></a></li>
  45. <li><a href="images/4.jpg" title="Samsung Mobile"></a></li>
  46. </ul>
  47. <h2 id="caption">Nokia Mobile</h2>
  48. <img src="images/1.jpg" id="image">
  49. </section>
  50. </body>
  51. </html>