Advanced Search

jQuery Fade Slideshow

/ Published in: jQuery
Save to your folder(s)
From a blog...

Expand | Embed | Plain Text

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.