So – how do one make a simple rotations function in jquery? There are many ways to do this, so I will just demonstrate one of them here:

Example code for the jQuery DIV rotator:

<div class="">
<div class="focusitem active">Item 1</div>
<div class="focusitem notactive">Item 2</div>
<div class="focusitem notactive">Item 3</div>
<div class="focusitem notactive">Item 4</div>
</div>

And this will output 4 divs as shown here:

Nothing exciting about this, really. So – lets add the forward and backward button for the shifting of visible divs.

Make the items rotate

<div class="goleft">Go Left</div>

<div class="">
<div class="focusitem active">Item 1</div>
<div class="focusitem notactive">Item 2</div>
<div class="focusitem notactive">Item 3</div>
<div class="focusitem notactive">Item 4</div>
</div>

<div class="goright">Go Right</div>

There is now added 2 buttons/divs/textsfield – a left one and a right one. All we have to do, is make the buttons change which div is visible. The easy way to do this, is by changing the class name of the div and with CSS control the visibility and format.

To register a click event on the left and right buttons, we have to use the click()-function in jQuery.

That can look like this:

Javascript:

     // trigger the mouse click even
     $(".goleft").click( function(e) {
        // get the current active element
        var $active = $(".active");
        // get the previous element or, if no previous then get the last item in the focusitem-class.
        var $next = $active.prev().length ? $active.prev() : $(".focusitem:last");

        // set the visibility of the active and notactive classes.
        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

CSS:

<div class="focusitem active">Item 1</div>
<div class="focusitem notactive">Item 2</div>
<div class="focusitem notactive">Item 3</div>
<div class="focusitem notactive">Item 4</div>

Result:

How it works

The jQuery rotation code gets activated as soon as a user clicks the buttons. It find the active element, and the next or previous element corresponding to which buttons is activated and the toggles the active and notactive classes on the focusitems.

Complete jQuery code:

(document).ready(function() {

    $(".goleft").click( function(e) {
        var $active = $(".active");
        var $next = $active.prev().length ? $active.prev() : $(".focusitem:last");

        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

    $(".goright").click( function(e) {
        var $active = $(".active");
        var $next = $active.next().length ? $active.next() : $(".focusitem:first");

        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

});

Complete CSS for the above example:

.active {
    display: block;
    width: 100px;
    float: left;
}
.notactive {
    display: none;
}

.goleft, .goright {
    cursor: pointer;
    width: 100px;
    float: left;
    border: 1px solid;
}

Now what?

For more fancy display that my example shows, try putting some images ind the focusitem and make some nice arrows for the go left and right buttons. The usability of the rotator will improve a lot, by making some easy layout adjustments.

Obvious expansions for this kind of rotator would be a more fancy shift/glide between active divs or perhaps loading each element with Ajax, but this is intensionally not covered in this post.