Simple jQuery Image Rotator - jQuery Snipplr Social Repository

Revision: 37515

at December 11, 2010 05:49 by cornellsteven

Updated Code

var count = 0, holder = '#rotatorSlides', sclass = '.rslide', inc = 4000;
function rotate() {
	count++;
	// Create loop
	setTimeout(function() {
		rotate();
	}, inc);
	
	// If this is the first iteration
	if (count == 1) {
		var first = $(sclass)[0];
		var firstc = $(first).clone().appendTo(holder).siblings().hide();
		$(first).remove();
		return;
	}

	// Rotate Images
	var img = $(sclass)[0];
	var clone = $(img).clone().appendTo(holder).fadeIn(800, function() {
		$(this).siblings().hide();
	});
	$(img).remove();
}


// Usage Example
//
// CSS RULES
// #rotatorSlides {
//	width: 589px;
//	height: 114px;
//	position: relative;
// }
// img.rslide {
//	position: absolute;
//	top: 0px;
//	left: 0px;
// }
//
// HTML MARKUP
// <div id="rotatorSlides">
// 	<img src="images/rslide-1.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-2.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-3.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-4.jpg" width="589" height="114" alt="" class="rslide">
// </div>

Revision: 37514

at December 11, 2010 05:48 by cornellsteven

Updated Code

var count = 0, holder = '#rotatorSlides', sclass = '.rslide', inc = 4000;
function rotate() {
	count++;
	// Create loop
	setTimeout(function() {
		rotate();
	}, inc);
	
	// If this is the first iteration
	if (count == 1) {
		var first = $(sclass)[0];
		var firstc = $(first).clone().appendTo(holder).siblings().hide();
		$(first).remove();
		return;
	}

	// Rotate Images
	var img = $(sclass)[0];
	var clone = $(img).clone().appendTo(holder).fadeIn(800, function() {
		$(this).siblings().hide();
	});
	$(img).remove();
}


// Usage Example
//
// CSS RULES
// #rotatorSlides {
//	width: 618px;
//	height: 159px;
//	position: relative;
// }
// img.rslide {
//	position: absolute;
//	top: 0px;
//	left: 0px;
// }
//
// HTML MARKUP
// <div id="rotatorSlides">
// 	<img src="images/rslide-1.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-2.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-3.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-4.jpg" width="589" height="114" alt="" class="rslide">
// </div>

Revision: 37513

at December 11, 2010 05:45 by cornellsteven

Updated Code

var count = 0, holder = '#rotatorSlides', sclass = '.rslide', inc = 4000;
function rotate() {
	count++;
	// Create loop
	setTimeout(function() {
		rotate();
	}, inc);
	
	// If this is the first iteration
	if (count == 1) {
		var first = $(sclass)[0];
		var firstc = $(first).clone().appendTo(holder).siblings().hide();
		$(first).remove();
		return;
	}

	// Rotate Images
	var img = $(sclass)[0];
	var clone = $(img).clone().appendTo(holder).fadeIn(800, function() {
		$(this).siblings().hide();
	});
	$(img).remove();
}


// Usage Example
//
// $(function() {
// 	rotate();
// });
//
// <div id="rotatorSlides">
// 	<img src="images/rslide-1.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-2.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-3.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-4.jpg" width="589" height="114" alt="" class="rslide">
// </div>

Revision: 37512

at December 11, 2010 05:43 by cornellsteven

Updated Code

var count = 0, holder = '#rotatorSlides', sclass = '.rslide', inc = 4000;
function rotate() {
	count++;
	// Create loop
	setTimeout(function() {
		rotate();
	}, inc);
	if (count == 1) {
		var first = $(sclass)[0];
		var firstc = $(first).clone().appendTo(holder).siblings().hide();
		$(first).remove();
		return;
	}

	var img = $(sclass)[0];
	var clone = $(img).clone().appendTo(holder).fadeIn(800, function() {
		$(this).siblings().hide();
	});
	$(img).remove();
}


// Usage Example
//
// $(function() {
// 	rotate();
// });
//
// <div id="rotatorSlides">
// 	<img src="images/rslide-1.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-2.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-3.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-4.jpg" width="589" height="114" alt="" class="rslide">
// </div>

Revision: 37511

at December 11, 2010 05:43 by cornellsteven

Updated Code

var count = 0, holder = '#rotatorSlides', sclass = '.rslide', inc = 4000;
function rotate() {
	count++;
	// Create loop
	setTimeout(function() {
		rotate();
	}, inc);
	if (count == 1) {
		var first = $(sclass)[0];
		var firstc = $(first).clone().appendTo(holder).siblings().hide();
		$(first).remove();
		return;
	}

	var img = $(sclass)[0];
	var clone = $(img).clone().appendTo(holder).fadeIn(800, function() {
		$(this).siblings().hide();
	});
	$(img).remove();
}


// Usage Example
//
// <script type="text/javascript">
// 	$(function() {
// 		rotate();
// 	});
// </script>
//
// <div id="rotatorSlides">
// 	<img src="images/rslide-1.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-2.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-3.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-4.jpg" width="589" height="114" alt="" class="rslide">
// </div>

Revision: 37510

at December 11, 2010 05:41 by cornellsteven

Updated Code

var count = 0, holder = '#rotatorSlides', sclass = '.rslide', inc = 4000;
function rotate() {
	count++;
	// Create loop
	setTimeout(function() {
		rotate();
	}, inc);
	if (count == 1) {
		var first = $(sclass)[0];
		var firstc = $(first).clone().appendTo(holder).siblings().hide();
		$(first).remove();
		return;
	}

	var img = $(sclass)[0];
	var clone = $(img).clone().appendTo(holder).fadeIn(800, function() {
		$(this).siblings().hide();
	});
	$(img).remove();
}


// Usage Example
//
// $(function() {
// 	rotate();
// });
//
// <div id="rotatorSlides">
// 	<img src="images/rslide-1.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-2.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-3.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-4.jpg" width="589" height="114" alt="" class="rslide">
// </div>

Revision: 37509

at December 11, 2010 05:38 by cornellsteven

Updated Code

var count = 0, holder = '#rotatorSlides', sclass = '.rslide', inc = 4000;
function rotate() {
	count++;
	// Create loop
	setTimeout(function() {
		rotate();
	}, inc);
	if (count == 1) {
		var first = $(sclass)[0];
		var firstc = $(first).clone();
		$(first).remove();
		$(firstc).appendTo(holder);
		$(firstc).siblings().hide();
		return;
	}
	
	var img = $(sclass)[0];
	var clone = $(img).clone();
	$(img).remove();
	$(clone).appendTo(holder);
	$(clone).fadeIn(800, function() {
		$(this).siblings().hide();
	});
}
$(function() {
	rotate();
});



// Usage Example
//
// $(function() {
// 	rotate();
// });
//
// <div id="rotatorSlides">
// 	<img src="images/rslide-1.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-2.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-3.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-4.jpg" width="589" height="114" alt="" class="rslide">
// </div>

Revision: 37508

at December 11, 2010 05:35 by cornellsteven

Initial Code

var count = 0, var holder = '#rotatorSlides', var sclass = '.rslide', var inc = 4000;
function rotate() {
	count++;
	// Create loop
	setTimeout(function() {
		rotate();
	}, inc);
	if (count == 1) {
		var first = $(sclass)[0];
		var firstc = $(first).clone();
		$(first).remove();
		$(firstc).appendTo(holder);
		$(firstc).siblings().hide();
		return;
	}
	
	var img = $(sclass)[0];
	var clone = $(img).clone();
	$(img).remove();
	$(clone).appendTo(holder);
	$(clone).fadeIn(800, function() {
		$(this).siblings().hide();
	});
}
$(function() {
	rotate();
});



// Usage Example
//
// $(function() {
// 	rotate();
// });
//
// <div id="rotatorSlides">
// 	<img src="images/rslide-1.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-2.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-3.jpg" width="589" height="114" alt="" class="rslide">
// 	<img src="images/rslide-4.jpg" width="589" height="114" alt="" class="rslide">
// </div>

Initial URL

Initial Description

Initial Title

Simple jQuery Image Rotator

Initial Tags

javascript, simple, jquery

Initial Language

jQuery

Choose a language for easy browsing: