漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js
漂亮jQuery 3D动画图片轮播切换特效插件jquery slicebox js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度、autoplay:true 是否自动播放,在
漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度、autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码。
使用方法:
1.加载插件和jQuery
2.HTML内容,HTML头部需要采用HTML5头 <!DOCTYPE html>
- <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>
3.函数调用
- <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>
- <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, //是否自动开始切换
相关内容
这些是最新的
热门关键词
pagination(1) Elastislide(1) 服务器配置(1) 返回顶部代码(4) Illustrator破解版(1) 大陆(1) 特效插件(3) 强制不换行(1) 滚动代码(1) 鼠标跟随(1) (2) 右侧(1) IE6(1) Retina(1) linux服务器(1) mysql(1) 购物网站(1) 3D功能(1) 网页(1) 返回顶部(4) 服务器(1) 网页设计教程(1) 百度直达号出炉后微信会慌吗?(1) 布局(2) 网页按钮(1) 滚动效果(1) win7(5) slicebox(1) Bootstrap(1) 教程(1)热门排行
- 输入框提示文字跨浏览器的placeholder-jQuery版(jQuery插件EnPlaceholder)
- jQuery刮刮卡特效插件jQuery.eraser
- 非常优秀响应式jQuery焦点图插件bxSlider
- 分享12个非常好的免费矢量资源网站
- 效果最好的焦点图幻灯片jQuery插件Skippr
- 基于Bootstrap改造的国产前端框架 H-ui
- 支持响应式的jQuery焦点图片无缝滚动切换特效插件Elastislide
- 实用jQuery分页特效插件jquery.pagination.js
- jQuery全屏鼠标滚动切换页面特效插件multiScroll.js
- 手机网站WebApp页面布局JS UI 框架App.js