(jQuery) Simple jQuery Rotator

The code is in three parts, a HTML layout (with some requirements I’ll go over below), some CSS code (again, requirements below) and the actual jQuery code. I go over all the code in detail at the link, but I’ll give a quick rundown od the jQuery as well.

The button that control next and previous are given IDs of “rotator_next” and “rotator_prev” respectively. The content shows in the a div with the ID “rotator_box”. Inside the “rotator_box” div there a other divs with the IDs “rotator_set_#” where # is a number, 1 through as many pages as you want.

The CSS:
The important part of the style is the width, height, and overflow property. The width and height allow you to control the way the items are display, be it column, grid, or standard horizontal orientation.

The jQuery:
The script runs on document load and sets up a click even for the next and previous buttons. This evens add or subtract the lastviwed accordingly and run the update function, which does the fading out and fading in. After the contents have faded in it sets the opacity to 1, this is just to prevent any overzealous user from clicking so fast it makes a page stop wanting to fade fully in.

Like I said, theres more info and an example at the link.

  • Posted by on January 1st, 1970
This entry was posted in JavaScript and tagged , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Why ask?