效果图：

Roundabout是一个转换静态HTML元素结构为交互式播放区域的jQuery插件（而且并不仅仅是一个转盘，还有许多的形状）

首先你要下载好Jquery.min.js,和Jquery-Roundabout.min.js，我会在文件里上传。

然后直接给上源代码。duration是转的快慢，值越大， 转的越慢。还有一些其他功能，详见百度Jquery-roundabout。

<head>

<style type="text/css">

body{ text-align:center;}

#featured-area{ height:200px; width:200px; margin: auto; padding-top:500px;}

#featured-area ul li{ height:100px; width:100px; background:#F00; color:#FFF;}

</style>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.roundabout-1.0.min.js"></script>

<script type="text/javascript">

$(function(){

           $('#featured-area ul').roundabout({

                                        duration:

                                             });

           })

</script>

</head>

<body>

<div id="featured-area" >

<ul>

<li>box3</li>

<li>box2</li>

<li>box1</li>

</ul>

</div>

</body>

</html>

Roundabout for jQuery的更多相关文章

  1. jquery.roundabout.js图片叠加3D旋转

    Roundabout是一个jQuery插件能够将一组静态HTML元素转换成可以灵活定制具有类似于转盘旋转效果的交互区域.有多种旋转形状可供选择.官方说明:roundabout.js是一个jQuery插 ...

  2. 33个好用的图片轮显 jquery图片轮显

    原文发布时间为:2011-05-28 -- 来源于本人的百度文章 [由搬家工具导入] 我个人还是喜欢 jquery.recycle，比较通用。因为由美工设计好的轮显结构，如果套用下面，就感觉不是很方便 ...

  3. js实现左右点击图片层叠滚动特效

    需要加载js有 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></s ...

  4. jquery.roundabout.js实现3D图片层叠旋转木马切换

    最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...

  5. jquery roundabout幻灯片插件3d图片切换支持图片旋转切换滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jquery.roundabout.js图片叠加3D旋转插件多功能图片翻转切换效果

    http://www.17sucai.com/pins/4880.html DEMO演示地址:http://www.17sucai.com/pins/demoshow/4880

  7. roundabout插件使用（3d旋转轮播图）兼容IE8

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. jquery 插件大全

    1.jquery.roundabout.js 超棒的左右3D旋转式幻灯片jQuery插件 2.jquery validate.js 验证表单 3.jquery ui插件 对话框 日期 4.lhgdia ...

  9. 轮播图3D效果--roundabout（兼容IE8）升级版

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. sharepoint 2013 个人网站公共母板页路径地址

    C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\FEATURES\MySiteUnif ...

  2. linux内核数据包转发流程（三）网卡帧接收分析

    [版权声明:转载请保留出处:blog.csdn.net/gentleliu.邮箱:shallnew*163.com] 每一个cpu都有队列来处理接收到的帧,都有其数据结构来处理入口和出口流量,因此,不 ...

  3. Storm基础知识

    上一篇文章我们介绍一个简单的Storm起源,今天我去学习Storm一些主要的知识,他的基本使用基本的了解.幸运的是,,不是太困难,假设我们理解Hadoop的MapReduce模型的话.看这个也是很类似 ...

  4. 软测试是一个烂摊子？NO——【软测试】

    软测试是一个烂摊子权?我开始也是这么认为的.这充分证明,.我并没有考虑,整个合并没有类似的项目. 前几天跟慕夏交流了怎样做总结,听完她讲的,我開始学着为细节的知识点找联系. 只是今天跟老师一交流,才发 ...

  5. 解决java.sql.SQLException: ORA-01789: query block has incorrect number of result columns

    java.sql.SQLException: ORA-01789: query block has incorrect number of result columns at oracle.jdbc. ...

  6. C和指针 （pointers on C）——第十一章：动态内存分配（下）习题

    1.编写calloc,内部用malloc. void *calloc (size_t n, size_t size) { char * memory; memory =(char*) malloc(n ...

  7. Android 布局管理器

    为了更好地管理Android应用程序的用户界面组件,Android它提供了一个布局管理.通过使用布局管理,Android具有良好的平台无关的图形用户界面应用程序. 平时,推荐布局管理器来管理分布式组件 ...

  8. ASP.NET5 Beta8

    ASP.NET5 Beta8 ASP.NET5 beta8现已上都的NuGet作为一个工具升级到Visual Studio2015!此版本极大地扩展.NET核心对OS X和Linux所支持的范围.您现 ...

  9. mysql数据库的安装以及常见优化设置

    原文请详见:http://www.ucai.cn/blogdetail/7036?mid=1&f=5 能够在线执行查看效果哦! 本文依据优才网课程整理,面向web开发人员,内容以有用为主,专业 ...

  10. java NIO中的Reactor相关知识汇总 （转）

    一.引子 nio是java的IO框架里边十分重要的一部分内容,其最核心的就是提供了非阻塞IO的处理方式,最典型的应用场景就是处理网络连接.很多同学提起nio都能说起一二,但是细究其背后的原理.思想往往 ...