Image carousel: a different type of movement control

This is the third tutorial in the series on using the Roundabout plugin for jQuery. It builds on code and concepts introduced in the first and second tutorials, so if you haven't gone through them already, I suggest you do so now, as I'm not going to explain those things again.

In this tutorial, I'll be walking you through a different way of controlling the movement of the image carousel, like in this example. Hovering over the various arrows causes the carousel to turn smoothly in different directions at different speeds.

HTML
The HTML for this example is similar to the previous tutorial, though I've removed the buttons and created some A (link) tags instead. Here's what should be in the BODY tag of your HTML document:

<div id="carousel">
    <img src="slide1.jpg" />
    <img src="slide2.jpg" />
    <img src="slide3.jpg" />
    <img src="slide4.jpg" />
    <img src="slide5.jpg" />
    <img src="slide6.jpg" />
</div>
<br />
<a href="#" id="carousel_left_fast" class="speed_control">&laquo;&laquo;</a>
<a href="#" id="carousel_left" class="speed_control">&laquo;</a>
<a href="#" id="carousel_right" class="speed_control">&raquo;</a>
<a href="#" id="carousel_right_fast" class="speed_control">&raquo;&raquo;</a>
</body>

As you can see, each A tag has its ID attribute defined, so that the jQuery scripts can detect when they are moused over and off. They also have a CLASS attribute assigned, which is simply so we can style them.

CSS
The CSS for this example is entirely for looks and has no effect on the actual functionality, so I'm just going to give it to you without extra explanation. Click on the linked property names if you need to be reminded what they do. This code is found in the HEAD tag of the HTML document:

<style type="text/css">
body {
    text-align: center;
}

#carousel {
    width: 1000px;
    height: 400px;
    background: lightgray;
    margin: 0 auto;
}

a.speed_control {
    color: black;
    text-decoration: none;
    font-size: 4em;
    padding: 0 10px;
    background: gray;
}

a.speed_control:hover {
    background: lightgray;
}
</style>

jQuery
There is a fair bit of jQuery for this example, but a lot of it is just a slight variation on what we used in the previous tutorial, and a lot of the rest is highly repetitive. Here's the complete set of code, which goes in the HEAD tag of your HTML document:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.roundabout.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var interval;
   
    $("#carousel").roundabout({
        childSelector: 'img',
        tilt: -5.0
    });
   
    $("#carousel_left").hover(
        function() {
            interval = startAutoPlay(-1);
        },
        function() {
            clearInterval(interval);
        }
    );
   
    $("#carousel_right").hover(
        function() {
            interval = startAutoPlay(1);
        },
        function() {
            clearInterval(interval);
        }
    );
   
    $("#carousel_left_fast").hover(
        function() {
            interval = startAutoPlay(-3);
        },
        function() {
            clearInterval(interval);
        }
    );
   
    $("#carousel_right_fast").hover(
        function() {
            interval = startAutoPlay(3);
        },
        function() {
            clearInterval(interval);
        }
    );
});

function startAutoPlay(speed) {
    return setInterval(function() {
        $("#carousel").roundabout_adjustBearing(speed);
    }, 17);
}
</script>

The basic functionality of this code is the same as in the previous tutorial. For an explanation of the "interval" variable and the "setInterval" and "clearInterval" methods, take a look at that tutorial. This tutorial is going to focus on the differences.

The first difference is that the "startAutoPlay" function that we created now sets a slightly different interval. Instead of using "roundabout_animateToNextChild", it uses "roundabout_adjustBearing", which basically rotates the image carousel by a certain number of degrees. The number of degrees is defined by the "speed" variable, which is given to the "startAutoPlay" function when it is called for. The timing of the interval has been changed to be every 17 milliseconds, which works out to an animation speed of a little under 60 frames per second.

Now, the second difference is that we are using the "hover" method instead of the "toggle" method. The four different "hover" events that are being defined here are all variations on the same theme: when the user mouses over a particular link (defined by its ID), the "startAutoPlay" function is called, and given a speed (or rather, a number of degrees per frame) to rotate the carousel at. When the user mouses off the link, the interval is cleared and the carousel stops turning. Positive values of "speed" make the carousel turn counter-clockwise, and negative values turn it clockwise. This basic method is then duplicated and the speed adjusted for each of the four links.

And that's it! You should now have a carousel that rotates smoothly at different speeds in different directions, controlled by the user. If there was any part of this tutorial that was unclear to you, or if there's things you'd like me to write future tutorials on, comment and let me know!