jQuery simple slideshow


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

slideshow with cross-fade transition - no plugin required


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.  
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  7.  
  8. <script type="text/javascript">
  9. $('html').addClass('js');
  10. $(document).ready( function() {
  11. setInterval("switchSlide()", 4000);
  12. });
  13. function switchSlide() {
  14. var slide = $("#slideshow .slide:first");
  15. slide.hide();
  16. $("#slideshow").append(slide);
  17. slide.fadeIn(1500);
  18. }
  19.  
  20. #tagline {width:332px; height:27px; overflow:hidden; margin:11px 0 0 0; position:relative; left:0;}
  21. #slideshow .slide {position: absolute;left:0;}
  22. #slideshow .slide a, #slideshow .slide img{border:none;}
  23. .js #slideshow .slide {display: none;}
  24.  
  25. </head>
  26.  
  27.  
  28. <div id="slideshow">
  29. <div class="slide">
  30. <a href="#"><img src="img1.png" height="" width="" alt=""></a>
  31. </div>
  32. <div class="slide">
  33. <a href="#"><img src="img2.png" height="" width="" alt=""></a>
  34. </div>
  35. </div>
  36.  
  37. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  38.  
  39. </body>
  40. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.