Snippets Javascript

Javascript Slideshow

Details
Category: Javascript
Written by admin
  


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

                          

                          

                        

                      

                    

                  

                

              

            

            

              

                

                  

                    

                      

                        
                      

                    

                  

                

                

                  

                    

                      
Categories