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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
Javascript简单改变表单元素背景的方法
Jul 15 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 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
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
PHP数组操作类实例
2015/07/11 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
vue项目实现减少app.js和vender.js的体积操作
2020/11/12 Javascript
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
函授毕业自我鉴定
2013/12/19 职场文书
婚前协议书
2014/04/15 职场文书
大学班级文化建设方案
2014/05/06 职场文书
动物科学专业求职信
2014/07/27 职场文书
工人先进事迹材料
2014/12/26 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android
pandas进行数据输入和输出的方法详解
2022/03/23 Python
关于Python使用turtle库画任意图的问题
2022/04/01 Python
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技