编程 Javascript

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

Posted in Javascript onApril 12, 2015

漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js，基于jQuery，插件采用CSS 3D 动画效果，支持事件Callback调用，支持参数自定义配置，如：speed：600 切换速度、autoplay:true 是否自动播放，在浏览器兼容方面，需要浏览器支持CSS3变换变形属性，不支持的将看不到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, //是否自动开始切换

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery的一些注意

Dec 06 Javascript

javascript offsetX与layerX区别

Mar 12 Javascript

浅析javascript闭包实例分析

Dec 25 Javascript

JQuery写动态树示例代码

Jul 31 Javascript

javascript实现类似超链接的效果

Dec 26 Javascript

微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（二）

May 11 Javascript

微信小程序使用modal组件弹出对话框功能示例

Nov 29 Javascript

vue中添加mp3音频文件的方法

Mar 02 Javascript

深入浅析angular和vue还有jquery的区别

Aug 13 jQuery

vue-router权限控制(简单方式)

Oct 29 Javascript

微信小程序使用websocket通讯的demo，含前后端代码，亲测可用

May 22 Javascript

viewer.js实现图片预览功能

Jun 24 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