效果图：

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. C#多线程编程实例 螺纹与窗口交互

    C#多线程编程实例 螺纹与窗口交互 代码: public partial class Form1 : Form { //声明线程数组 Thread[] workThreads = new Thread ...

  2. 最新jhost免费jsp云空间会员邀请码

    jhost支持jsp.php的免费云空间,邀请码用于激活空间服务: 邀请码:20141003104317_149661                  有效期:2014-10-03 http://w ...

  3. C++学习笔记25,析构函数总是会宣布virtual

    为了永远记住析构函数声明virtual----><<effective c++>> 为这句话不一定对,但无需质疑的是这句话是非常实用的. 查看以下的样例: #includ ...

  4. nodeJs基础

    Node.js 是一个基于Chrome JavaScript 执行时建立的一个平台, 用来方便地搭建高速的 易于扩展的网络应用· Node.js 借助事件驱动, 非堵塞I/O 模型变得轻量和高效, 很 ...

  5. 微通道产品经理Grover采访：美国的微通道设计

    "'哥'在中国是一种尊称吗?哈哈.我们平时都叫张小龙'龙哥'." "是的.Dan哥,当你认为某个人牛逼的时候,你就能够叫他'哥'." 我对于Dan Grover ...

  6. Objective-c正确的写法单身

    Singleton模式iOS发展可能是其中最常用的模式中使用的.但是因为oc语言特性本身,想要写一个正确的Singleton模式是比较繁琐,iOS中单例模式的设计思路. 关于单例模式很多其它的介绍请參 ...

  7. 视频和音频播放的演示最简单的例子6：OpenGL广播YUV420P（T经exture，采用Shader）

    ===================================================== 最简单的视频和音频播放的演示样品系列列表: 最简单的视音频播放演示样例1:总述 最简单的视音 ...

  8. 模拟Vue之数据驱动3

    一.前言 在"模拟Vue之数据驱动2"中,我们实现了个Observer构造函数,通过它可以达到监听已有数据data中的所有属性. 但,倘若我们想在某个对象中,新增某个属性呢? 如下 ...

  9. Python 提取Twitter转发推文的元素（比方username）

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-24 @author: guaguastd @name: e ...

  10. C++在设计和使用智能指针

    为一个C++用户的.使用指针可以算的上是常态,但在使用过程中.多的时间,可能是由于new要么malloc对象,上次忘记的释放结束(我会犯这样一个错误).内存泄露. 而此时智能指针可能能够帮助我去解决问 ...