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 相关文章推荐
拖动一个HTML元素
Dec 22 Javascript
关于图片按比例自适应缩放的js代码
Oct 30 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
php 生成饼图 三维饼图
2009/09/28 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
JavaScript中Math对象使用说明
2008/01/16 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Numpy之random函数使用学习
2019/01/29 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
西安交大自主招生自荐信
2014/01/27 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
锅炉工岗位职责
2015/02/13 职场文书
教学反思怎么写
2016/02/24 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS