Posted By

cornellsteven on 12/11/10


Tagged

javascript simple jquery rotator


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

luman
kwameboame
thisisrogerflanagan
johnw


Simple jQuery Image Rotator


 / Published in: jQuery
 

  1. var count = 0, holder = '#rotatorSlides', sclass = '.rslide', inc = 4000;
  2. function rotate() {
  3. count++;
  4. // Create loop
  5. setTimeout(function() {
  6. rotate();
  7. }, inc);
  8.  
  9. // If this is the first iteration
  10. if (count == 1) {
  11. var first = $(sclass)[0];
  12. var firstc = $(first).clone().appendTo(holder).siblings().hide();
  13. $(first).remove();
  14. return;
  15. }
  16.  
  17. // Rotate Images
  18. var img = $(sclass)[0];
  19. var clone = $(img).clone().appendTo(holder).fadeIn(800, function() {
  20. $(this).siblings().hide();
  21. });
  22. $(img).remove();
  23. }
  24.  
  25.  
  26. // Usage Example
  27. //
  28. // CSS RULES
  29. // #rotatorSlides {
  30. // width: 589px;
  31. // height: 114px;
  32. // position: relative;
  33. // }
  34. // img.rslide {
  35. // position: absolute;
  36. // top: 0px;
  37. // left: 0px;
  38. // }
  39. //
  40. // HTML MARKUP
  41. // <div id="rotatorSlides">
  42. // <img src="images/rslide-1.jpg" width="589" height="114" alt="" class="rslide">
  43. // <img src="images/rslide-2.jpg" width="589" height="114" alt="" class="rslide">
  44. // <img src="images/rslide-3.jpg" width="589" height="114" alt="" class="rslide">
  45. // <img src="images/rslide-4.jpg" width="589" height="114" alt="" class="rslide">
  46. // </div>

Report this snippet  

You need to login to post a comment.