效果图：

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. R语言和数据分析十大：购物篮分析

    提到数据挖掘,我们的第一个反应是之前的啤酒和尿布的故事听说过,这个故事是一个典型的数据挖掘关联规则.篮分析的传统线性回归之间的主要差别的差别,对于离散数据的相关性分析: 常见的关联规则: 关联规则:牛 ...

  2. TestNg显示器(一个)-----监听器，类型和配置使用---另外META-INF详细解释

    原创文章,版权所有所有.转载,归因:http://blog.csdn.net/wanghantong/article/details/40404939 TestNg提供了听众和拦截多种接口开发我们自己 ...

  3. 在Sql中使用Try Catch

    原文:在Sql中使用Try Catch 今天在写sql中出现了!我想在sql使用trycatch吧! 哎..但是语法又记不住了! 那就清楚我们的google大师吧! 嘿,网上关于在sql中使用Try ...

  4. Oracle性能分析3：TKPROF简介

    tkprof它是Oracle它配备了一个命令直插式工具,其主要作用是将原始跟踪文件格文本文件的类型,例如,最简单的方法,使用下面的: tkprof ly_ora_128636.trc ly_ora_1 ...

  5. SQLServer RESOURCE_SEMAPHORE 等待状态

    原文:SQLServer RESOURCE_SEMAPHORE 等待状态 概述: 当一个SQLServer实例运行得很慢的时候,应该做一些检查,如检查等待状态.最好的方法是一开始就建立一个性能基线,以 ...

  6. struts2和struts1认识

    1.Struts 2基本流程 Struts 2框架本身可以大致分3部分:核心控制器FilterDispatcher.业务总监Action与用户实现企业业务逻辑组件. 核心控制器FilterDispat ...

  7. Canvas的quadraticCurveTo 和 bezierCurveTo 画曲线 方法细说

    详细代码如下: <!doctype html> <html lang="en"> <head> <script src="htt ...

  8. 引用:初探Sql Server 执行计划及Sql查询优化

    原文:引用:初探Sql Server 执行计划及Sql查询优化 初探Sql Server 执行计划及Sql查询优化 收藏 MSSQL优化之————探索MSSQL执行计划 作者:no_mIss 最近总想 ...

  9. 8年，属于 HTML 5 春天的到来悄悄!

    [核心提示] 在 8 年时间中,HTML 5 为整个行业都带来了什么.标准终于确定后又会产生什么样的变革呢? 微博微信Twitter对于非常多人来说,非常有可能在微信的朋友圈里玩过「围住神经猫」,也非 ...

  10. webserver实现

    最近的工作需求client和server使用https协议进行通讯,我负责client编写程序,在操作系统的-depth理解认为一旦前webserver实现,整理代码: #include"a ...