【jQuery】roundAbout

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="http://fredhq.com/lib/js/projects/roundabout/jquery.roundabout2.js"></script>
<script src="http://fredhq.com/lib/js/projects/roundabout-shapes/jquery.roundabout-shapes2.js"></script>
<div id="header">LOGO</div>
<div id="bnWrapper">
        <ul id="topBn">
            <li><a href="#"><img src="http://placekitten.com/g/300/150" alt="" /></a></li>
            <li><a href="#"><img src="http://placekitten.com/300/150" alt="" /></a></li>
            <li><a href="#"><img src="http://placekitten.com/g/300/150" alt="" /></a></li>
            <li><a href="#"><img src="http://placekitten.com/300/150" alt="" /></a></li>
            <li><a href="#"><img src="http://placekitten.com/g/300/150" alt="" /></a></li>
            <li><a href="#"><img src="http://placekitten.com/g/300/150" alt="" /></a></li>
            <li><a href="#"><img src="http://placekitten.com/g/300/150" alt="" /></a></li>
        </ul>
</div>

<a href="#" class="prev">&lt;&lt;prev</a>
<a href="#" class="next">next&gt;&gt;</a>

CSS

#header {
    margin-bottom: 20px;}
#bnWrapper {
    width: 500px;
    height: 200px;
    margin: 0 auto;
}
#topBn {
    width: 25em;
    height: 10em;
    margin:0 auto;
}
#topBn li {
    width:18.750em;height:18em;
    box-shadow:0 2px 10px #333;
}
#topBn li img{width:100%;}

JavaScript

$('#topBn').roundabout({
    tilt: 0,
    minScale: 0.1,
    maxScale: 1,
    minOpacity: 0,
    shape: 'square'
});

$(".next").click(function() {
    $("#topBn").roundabout("animateToNextChild");
    return false;
});
$(".prev").click(function() {
    $("#topBn").roundabout("animateToPreviousChild");
    return false;
});