Advanced Search

jQuery simple slideshow

/ Published in: XHTML
Save to your folder(s)
slideshow with cross-fade transition - no plugin required

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  8.  
  9. <script type="text/javascript">
  10. $('html').addClass('js');
  11. $(document).ready( function() {
  12. setInterval("switchSlide()", 4000);
  13. });
  14. function switchSlide() {
  15. var slide = $("#slideshow .slide:first");
  16. slide.hide();
  17. $("#slideshow").append(slide);
  18. slide.fadeIn(1500);
  19. }
  20. </script>
  21.  
  22. <style>
  23. #tagline {width:332px; height:27px; overflow:hidden; margin:11px 0 0 0; position:relative; left:0;}  
  24. #slideshow .slide {position: absolute;left:0;}
  25. #slideshow .slide a, #slideshow .slide img{border:none;}
  26. .js #slideshow .slide {display: none;}
  27. </style>
  28.  
  29. </head>
  30.  
  31. <body>
  32.  
  33. <div id="slideshow">
  34.     <div class="slide">
  35.         <a href="#"><img src="img1.png" height="" width="" alt=""></a>
  36.     </div>    
  37.     <div class="slide">
  38.         <a href="#"><img src="img2.png" height="" width="" alt=""></a>
  39.     </div>
  40. </div>
  41.  
  42. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  43.  
  44. </body>
  45. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.