最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。

兼容性如图:

html结构代码:

<div id="featured-area">
<ul>
<li><img src="data:images/fnfast.jpg"/></li>
<li><img src="data:images/photoshop_plus.jpg"/></li>
<li><img src="data:images/speedometer.jpg"/></li>
<li><img src="data:images/photoshop_plus.jpg"/></li>
</ul>
<a href="javascript:void(0)" class="ban_l_btn"></a>
<a href="javascript:void(0)" class="ban_r_btn"></a>
</div>

css样式:

#featured-area{height:337px;width:1200px;margin:40px auto 0 auto;position:relative;}
.roundabout-holder{list-style:none;width:500px;height:300px;margin:0px auto;}
.roundabout-moveable-item{font-size:12px!important;height:300px;width:600px;cursor:pointer;padding:5px;border:1px solid #aaaaaa;-webkit-border-radius:5px;-moz-border-radius:5px;background:#f9f9f9;}
.roundabout-moveable-item img{height:100%;width:100%;background-color:#FFFFFF;margin:;}
.roundabout-in-focus{cursor:auto;}
.roundabout-in-focus:hover{-webkit-box-shadow:0px 0px 20px #787878;-moz-box-shadow:0px 0px 20px #787878;background:#f9f9f9;}
.roundabout-holder span{display:none;}
.roundabout-in-focus:hover span{display:inline;position:absolute;bottom:5px;right:5px;padding:8px 20px;background:#f9f9f9;color:#3366cc;z-index:;-webkit-border-top-left-radius:5px;-moz-border-radius-topLeft:5px;border-left:1px solid #aaaaaa;border-top:1px solid #aaaaaa;}
.roundabout a:active, .roundabout a:focus, .roundabout a:visited{outline:none;text-decoration:none;}
.roundabout li{margin:} #featured-area .ban_l_btn,#featured-area .ban_r_btn{ position: absolute; top: 50%;margin-top:-34px; left:-1px; display: block; width: 65px; height: 68px; background: url(../images/wid65Btn.png) 0 0 ; z-index:; overflow: hidden; }
#featured-area .ban_r_btn{ left:auto; right:-1px; background-position: -65px 0; }
#featured-area ul li div{width:100%;height: 100%;}

引入的js

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

调用的一般形式:

$('主元素名称').roundabout({
duration: 600, // 运动速度
btnPrev: ".ban_r_btn", // 右按钮
btnNext: ".ban_l_btn", // 左按钮
autoplay: true, // 自动播放
autoplayDuration: 1500,// 自动播放的时间
minOpacity: 0, //最小的透明度
maxOpacity: 1, //最大的透明度
reflect: true, // 为true时是从左向右移动,为false从右向左移动
startingChild: 3, // 默认的显示第几张图片
autoplayInitialDelay: 5000, // 从第几秒时,开始自动播放(默认毫秒)开始的第一次管用
autoplayPauseOnHover: true, // 鼠标移入元素内是否自动播放,为true不播放,false还自动播放
enableDrag: true // 在移动端可以拖拽播放
});

实现的效果如图:

需要查看demo,点击下载

更多详解请查看地址:http://demo.niutuku.com/js/20/3/

当然该插件可扩展其它更多效果,如jQuery.Roundabout.js制作图片倾斜层叠切换效果,参考地址:http://www.uedsc.com/jquery-roundabout-js.html

jquery.roundabout.js实现3D图片层叠旋转木马切换的更多相关文章

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

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

  2. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

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

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

  4. jQuery.rotate.js(控制图片转动)

    jQuery.rotate.js笔记   1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的, ...

  5. 基于jquery带时间轴的图片轮播切换代码

    基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2 ...

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

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

  7. jquery简单的大背景banner图片全屏切换

    详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...

  8. 3d图片点击切换

    效果图: 代码块: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

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

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

随机推荐

  1. 经典案例:那些让人赞不绝口的创新 HTML5 网站

    在过去的10年里,网页设计师使用 Flash.JavaScript 或其他复杂的软件和技术来创建网站.但现在你可以前所未有的快速.轻松地设计或创造互动的.有趣好看的网站.如何创建?答案是 HTML5 ...

  2. BookBlock - 效果非常真实的书本翻页预览

    这个名为 BookBlock 的图片预览效果是一个书展示或网上书店的概念,已全屏打开3D页面导航网格的形式显示图书的详细信息.我们可以打开书预览的摘录,其中有一些细节的网格.对于图书预览,我们在使用 ...

  3. 如何判断一个js对象是否一个DOM对象

    我们在写js代码时有时需要判断某个对象是不是DOM对象,然后再进行后续的操作,这里我给出一种兼容各大浏览器,同时又算是比较稳妥的一种方法. 要判断一个对象是否DOM对象,首先想到的无非就是它是否具有D ...

  4. 用node-webkit把web应用打包成桌面应用

    node-webkit是一个Chromium和node.js上的结合体,通过它我们可以把建立在chrome浏览器和node.js上的web应用打包成桌面应用,而且还可以跨平台的哦.很显然比起传统的桌面 ...

  5. ArcGIS空间分析工具

    1. 3D分析 1.1. 3D Features toolset 工具 工具 描述 3D Features toolset (3D 要素工具集) Add Z Information 添加 Z 信息 添 ...

  6. Android Content Provider基础

    Android Content Provider基础 Content Providers Content providers管理对一个结构化的数据集合的访问.它们封装了数据,并且提供了保护数据安全性的 ...

  7. XMPP学习——1、介绍

    XMPP(Extensible Messaging and Presence Protocol,前称Jabber[1])是一种以XML为基础的开放式实时通信协议,是经由互联网工程工作小组(IETF)通 ...

  8. 【代码笔记】iOS-判断是否是模拟机

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  9. Android IPC机制之ContentProvider

    ContentProvider:即内容提供者,用来管理数据,并对外暴露一个uri,外部可以通过uri和数据建立联系并获取或操作数据: 服务端:1.首先创建一个数据库类,并创建一个表:2.创建一个Con ...

  10. WPF 命令基础

    1命令的组成 命令源:就是谁发送的命令. 命令目标:就是这个命令发送给谁,谁接受的命令. 命令:就是命令的内容. 命令关联:就是把命令和外围的逻辑关联起来,主要用来判断命令是否可以执行和执行完以后干点 ...