roundabout是一个非常经典的jQuery图片叠加3D轮盘旋转效果的插件

roundabout.js是一个非常经典的图片叠加3D轮盘旋转效果的jQuery插件，它可以改变静态html元素的组织形式并使之成为可按用户需要作更改的转盘式的交互区域，在它最简单的配置中，Roundabout可以使用有序或无序列表，然而进行一些快速的配置后，roundabout则可以使用一些嵌套元素。有多种旋转形状可供选择。

那么怎去使用roundabout.js呢？请看下面代码

1、demo的html代码:

<div class="demo-box">
	<ul class="demo-item">
		<li><span>img1</span></li>
		<li><span>img2</span></li>
		<li><span>img3</span></li>
		<li><span>img4</span></li>
		<li><span>img5</span></li>
	</ul>
	<div class="switch">
		<span id="btn-next">上一张</span>
		<span id="btn-prev">下一张</span>
	</div>
</div>

2、css样式：

        
        .demo-box{height: 250px; margin: 100px auto;}
        .demo-item{ width: 900px; height: 200px; }
        .demo-item li{ width: 320px;height: 200px;background-color:#ccc; list-style: none; text-align: center; line-height: 100px;}
        .demo-item li:nth-child(1){ background: #27ae60 }
        .demo-item li:nth-child(2){ background: #51A6AD }
        .demo-item li:nth-child(3){ background: #603CBA }
        .demo-item li:nth-child(4){ background: #3399FF }
        .demo-item li:nth-child(5){ background: #C47F3E }
        .switch{ width: 240px; margin: 0 auto }
        .switch span{ display: block; width: 80px; height: 40px; background: #603CBA; margin: 10px 0 0 40px; color: #fff; float: left; text-align: center; line-height: 40px;}

3、js引用代码：
其实使用它挺简单的，只要一行js代码就搞定。但它还有很多参数可以设置的。

 $(function(){
	   $('.demo-item').roundabout({
		btnNext: '#btn-next',
		btnPrev: '#btn-prev',
		autoplay: true, //自动播放
		autoplayDuration: 5000,
		autoplayPauseOnHover: true,
		enableDrag: true
	   });
})

具体demo请点“roundabout例子”