Ring switcher

by James Doyle

HTML

<script src="http://fredhq.com/lib/js/projects/roundabout/jquery.roundabout.js"></script>
<ul id="myRoundabout">
    <li><h2>Box 1</h2></li>
    <li>Box 2</li>
    <li>Box 3</li>
    <li>Box 4</li>
</ul>

CSS

.roundabout-holder { padding: 0; margin-top: 15%; height: 5em; list-style: none }
.roundabout-moveable-item { 
    height: 250px; 
    width: 400px;
    padding: 10px;
    cursor: pointer;
    color:#61A3D5;
    background-color: rgba(255,255,255,0.7);
    -o-border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.7);
    border: 1px solid #999;
}
.roundabout-in-focus { cursor: auto; }

JavaScript

$(document).ready(function() {
    $('ul#myRoundabout').roundabout({
        duration: 1000
    });
});