Here’s a jQuery plugin that rotates through list items with a nice fade effect. You may nest any type of element you like inside a given list item. Here’s a live demo for this project.

Drop these scripts in your header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.quote_rotator.js" type="text/javascript" charset="utf-8"></script>

Call the function to any list element:

$(document).ready(function() {
    $('ul#quotes').quote_rotator();
});

You can specify which quote you’d like to show first by adding a class of active to the list item. If you don’t explicitly add an active class, it will default to the first item in the list.

$('ul#quotes').quote_rotator({ 
     rotation_speed: 7000,                    // defaults to 5000
     pause_on_hover: false,                   // defaults to true
     randomize_first_quote: true              // defaults to false
     buttons: { next: '>>', previous: '<<' }  // defaults to false 
});

Rotation will pause on mouse hover by default. This is nice if you’re rotating through links or other elements that you might not want fading away from the user.

Also notice that next/previous buttons are not included by default. If you want buttons, you need override the buttons option. As in the example above, assign a javascript object with next and previous keys. The values will be used as text for your buttons.

0.1.0

• Added MIT and GPL licenses

• New config option to randomize first quote on page load

1.0

• Added unit tests using Jasmine

• Revamped demo page and gh-page

• Significant refactoring

• Added support for next/previous buttons (issue #2)