jQuery插件slicebox实现3D动画图片轮播切换特效


Posted in Javascript onApril 12, 2015

漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度、autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码。

jQuery插件slicebox实现3D动画图片轮播切换特效

使用方法:

1.加载插件和jQuery

<link type="text/css" rel="stylesheet" href="css/slicebox.css" /> 
<script type="text/javascript" src="js/modernizr.js"></script> 
<script type="text/javascript" src="js/jquery8.js"></script> 
<script type="text/javascript" src="js/jquery.slicebox.js"></script>

2.HTML内容,HTML头部需要采用HTML5头 <!DOCTYPE html>

<ul id="sb-slider" class="sb-slider"> 
 <li> 
<img src="images/1.jpg" alt="image1"/> 
</li> 
<li> 
<img src="images/2.jpg" alt="image2"/> 
</li> 
<li> 
<img src="images/3.jpg" alt="image2"/> 
</li> 
<li> 
<img src="images/4.jpg" alt="image2"/> 
</li> 
<li> 
<img src="images/5.jpg" alt="image2"/> 
</li> 
</ul> 
<div> 
<span onclick="$slicebox.previous();">上一页</span> 
<span onclick="$slicebox.next();">下一页</span> 
<span onclick="$slicebox.jump(4);">跳页</span> 
</div>

3.函数调用

<script type="text/javascript"> 
var $slicebox; $(function() { 
  $slicebox = $('#sb-slider').slicebox({ 
    interval:6000, 
    orientation : "r", //表示幻灯片的切换方向,可取 (v)垂直方向, (h)水平方向 or (r)随机方向 
    perspective : 800, //透视点距离,可以通过改变其值查看效果 
    cuboidsCount : 5, //幻灯片横向或纵向被切割的块数,切割的每一块将会以3D的形式切换 
    cuboidsRandom : true, //是否随机 cuboidsCount 参数的值 
    maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount 值 
    colorHiddenSides : "#333", //隐藏的幻灯片的颜色 
    sequentialFactor : 150, //幻灯片切换时间(毫秒数) 
    speed : 600, //每一块3D立方体的速度 
    autoplay : true, //是否自动开始切换 
    onBeforeChange : function(position) { return false; }, 
    onAfterChange : function(position) { return false; } 
  }); 
}); 
</script>

参数说明:
orientation : "r", //表示幻灯片的切换方向,可取 (v)垂直方向, (h)水平方向 or (r)随机方向
perspective : 800, //透视点距离,可以通过改变其值查看效果
cuboidsCount : 5, //幻灯片横向或纵向被切割的块数,切割的每一块将会以3D的形式切换
cuboidsRandom : true, //是否随机 cuboidsCount 参数的值
maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount 值
colorHiddenSides : "#333", //隐藏的幻灯片的颜色
sequentialFactor : 150, //幻灯片切换时间(毫秒数)
speed : 600, //每一块3D立方体的速度
autoplay : true, //是否自动开始切换

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
基于JQuery的asp.net树实现代码
Nov 30 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
js验证密码强度解析
Mar 18 Javascript
原生JS实现多条件筛选
Aug 19 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 #Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 #Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 #Javascript
jQuery实现简单二级下拉菜单
Apr 12 #Javascript
纯JS实现旋转图片3D展示效果
Apr 12 #Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 #Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
SONY ICF-F10中波修复记
2021/03/02 无线电
php中的静态变量的基本用法
2014/03/20 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python简单操作sqlite3的方法示例
2017/03/22 Python
浅析Python数据处理
2018/05/02 Python
python中实现字符串翻转的方法
2018/07/11 Python
Random 在 Python 中的使用方法
2018/08/09 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
python cookie反爬处理的实现
2020/11/01 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
物业保安员岗位职责制度
2014/01/30 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android