Advanced Search

Simple jQuery Image Rotator

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.