jQuery Fade Slideshow


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

From a blog...


Copy this code and paste it in your HTML
  1. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready( function() {
  4. // Every 5 seconds execute the switchSlide() function
  5. var playSlideshow = setInterval( "switchSlide()", 5000);
  6. $('.slideshow').hover(function(){
  7. clearInterval(playSlideshow);
  8. },
  9. function(){
  10. playSlideshow = setInterval("switchSlide()",5000);
  11. });
  12. });
  13. // This function takes the first .slide element and put at the end
  14. function switchSlide() {
  15. var slide = $('.slideshow li:first');
  16. slide.hide();
  17. $('.slideshow').append(slide);
  18. slide.fadeIn('slow');
  19. }
  20. </script>
  21. <style type="text/css">
  22. .slideshow {height: 269px;width: 140px;margin: 0;position: relative;list-style:none;}
  23. .slideshow li {position: absolute;}
  24. </style>
  25. ***
  26. <ul class="slideshow">
  27. <li><img src="images/1.gif"></li>
  28. <li><img src="images/2.gif"></li>
  29. <li><img src="images/3.gif"></li>
  30. <li><img src="images/4.gif"></li>
  31. <li><img src="images/5.gif"></li>
  32. <li><img src="images/6.gif"></li>
  33. </ul>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.