X

jQuery Rotator Plugin (jqRotator)

The jQuery Rotator Plugin allows you to easily create a rotation effect.

Example 1: $("#rotator1").rotator();

AAAAAAAAAAAAA
BBBBBBBBBBBBB
CCCCCCCCCCCCC
DDDDDDDDDDDDD


<id="rotator1" style="height: 100px; overflow:hidden;"> <div style="background-color:red; height: 50px;">AAAAAAAAAAAAA</div> <div style="background-color:blue; height: 75px;">BBBBBBBBBBBBB</div> <div style="background-color:green; height: 60px;">CCCCCCCCCCCCC</div> <div style="background-color:yellow; height: 20px;">DDDDDDDDDDDDD</div> </div>
Example 2: $("#rotator2").rotator({n:2});

AAAAAAAAAAAAA
BBBBBBBBBBBBB
CCCCCCCCCCCCC
DDDDDDDDDDDDD


<div id="rotator2" style="height: 30px; overflow:hidden;"> <div style="background-color:red;">AAAAAAAAAAAAA</div> <div style="background-color:blue;">BBBBBBBBBBBBB</div> <div style="background-color:green;">CCCCCCCCCCCCC</div> <div style="background-color:yellow;">DDDDDDDDDDDDD</div> </div>



Download:

Download v2.1
Licensed under the MIT license.

Code:

This is how you create a rotation effect:

		$("#example1").rotator();

API 
		$("#example1").rotator({
		 ms : 2000, //time between rotations in miliseconds

		 n: n //number of children elements to display

		});



Example 3: $("#rotator3").rotator({n:3, autoHeight:true});

AAAAAAAAAAAAA
BBBBBBBBBBBBB
CCCCCCCCCCCCC
DDDDDDDDDDDDD


<id="rotator1" style="height: 100px; overflow:hidden;"> <div style="background-color:red; height: 50px;">AAAAAAAAAAAAA</div> <div style="background-color:blue; height: 75px;">BBBBBBBBBBBBB</div> <div style="background-color:green; height: 60px;">CCCCCCCCCCCCC</div> <div style="background-color:yellow; height: 20px;">DDDDDDDDDDDDD</div> </div>