• 成人电影 成人电影 成人电影
  • 成人电影 成人电影 成人电影
  • 成人电影 成人电影 成人电影
  • 设为首页 - 加入收藏
    广告 1000x90
    您的当前位置:云鼎彩票 > 云鼎娱乐平台 > 效果代码 > 正文

    漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js

    来源:未知 编辑:admin 时间:2015-09-02
    漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js,基于jQuery,插件采用CSS 3D 动画效果,支持事件Callback调用,支持参数自定义配置,如:speed:600 切换速度、autoplay:true 是否自动播放,在浏览器兼容方面,需要浏览器支持CSS3变换变形属性,不支持的将看不到3D特效,推荐学习下代码。
    漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js
    使用方法:
    1.加载插件和jQuery
    1. <link type="text/css" rel="stylesheet" href="css/slicebox.css" /> 
    2. <script type="text/javascript" src="js/modernizr.js"></script> 
    3. <script type="text/javascript" src="js/jquery8.js"></script> 
    4. <script type="text/javascript" src="js/jquery.slicebox.js"></script> 
    2.HTML内容,HTML头部需要采用HTML5头 <!DOCTYPE html>
    1. <ul id="sb-slider" class="sb-slider"> 
    2.  <li> 
    3. <img src="images/1.jpg" alt="image1"/> 
    4. </li> 
    5. <li> 
    6. <img src="images/2.jpg" alt="image2"/> 
    7. </li> 
    8. <li> 
    9. <img src="images/3.jpg" alt="image2"/> 
    10. </li> 
    11. <li> 
    12. <img src="images/4.jpg" alt="image2"/> 
    13. </li> 
    14. <li> 
    15. <img src="images/5.jpg" alt="image2"/> 
    16. </li> 
    17. </ul> 
    18. <div> 
    19. <span onclick="$slicebox.previous();">上一页</span> 
    20. <span onclick="$slicebox.next();">下一页</span> 
    21. <span onclick="$slicebox.jump(4);">跳页</span> 
    22. </div> 
    3.函数调用
    1. <script type="text/javascript"> 
    2. var $slicebox; $(function() { 
    3.     $slicebox = $('#sb-slider').slicebox({  
    4.         interval:6000,  
    5.         orientation : "r", //表示幻灯片的切换方向,可取 (v)垂直方向, (h)水平方向 or (r)随机方向 
    6.         perspective : 800, //透视点距离,可以通过改变其值查看效果 
    7.         cuboidsCount : 5, //幻灯片横向或纵向被切割的块数,切割的每一块将会以3D的形式切换 
    8.         cuboidsRandom : true, //是否随机 cuboidsCount 参数的值 
    9.         maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount 值 
    10.         colorHiddenSides : "#333", //隐藏的幻灯片的颜色 
    11.         sequentialFactor : 150, //幻灯片切换时间(毫秒数) 
    12.         speed : 600, //每一块3D立方体的速度 
    13.         autoplay : true, //是否自动开始切换 
    14.         onBeforeChange : function(position) { return false; },  
    15.         onAfterChange : function(position) { return false; }  
    16.     });  
    17. });  
    18. </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, //是否自动开始切换

    相关推荐:

    网友评论:

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    评价:
    表情:
    用户名: 验证码:点击我更换图片
    

    模板天下 www.mobantianxia.com 联系QQ:498872301 邮箱:498872301@qq.com

    Copyright © 2002-2011 DEDECMS. 织梦科技 版权所有 Power by DedeCms

    Top