SliceBox.js 3d 三维轮播图插件-BFW插件库

SliceBox.js 3d 三维轮播图插件

SliceBox.js 3d 三维轮播图插件，效果震撼

第一步引入bfwone

第二步执行插件

示例如下，可直接在线编辑运行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|modernizr.custom&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var $slicebox;

        bready(function() {
            use(["jquery.slicebox", "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>
 
      
</head>
<body>
    <div class="wrapper">

        <ul id="sb-slider" class="sb-slider">
            <li>
                <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" alt="image1" />
            </li>
            <li>
                <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" alt="image2" />
            </li>
            <li>
                <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" alt="image2" />
            </li>
            <li>
                <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="image2" />
            </li>
            <li>
                <img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/5.jpg" alt="image2" />
            </li>
        </ul>

     

    </div>
    <!-- /wrapper -->
    <div>
        <span onclick="$slicebox.previous();">上一页</span>
        <span onclick="$slicebox.next();">下一页</span>
        <span onclick="$slicebox.jump(4);">跳页</span>
    </div>
</body>
</html>

配置属性解释

 interval:6000,//自动播放的时候每个多少毫秒播放下一个图片
 orientation : "r", //表示幻灯片的切换方向，可取 (v)垂直方向, (h)水平方向 or (r)随机方向
 perspective : 800, //透视点距离，可以通过改变其值查看效果（相当一你的眼睛离图片的距离）
 cuboidsCount : 5, //幻灯片横向或纵向被切割的块数，切割的每一块将会以3D的形式切换
 cuboidsRandom : true, //是否随机 cuboidsCount 参数的值（切换图片的时候图片被切割的个数是随机的）
 maxCuboidsCount : 5, //设置一个值用来规定最大的 cuboidsCount 值
 disperseFactor : 50,//被切割的时候每个块分开的像素距离，默认是0
 colorHiddenSides : "#333", //隐藏的幻灯片的颜色（被切割块侧面的颜色）
 sequentialFactor : 150, //幻灯片切换时间（毫秒数）
 speed : 600, //每一块3D立方体的速度
 easing : 'ease', //切换效果
 autoplay : true, //是否自动开始切换（如果设置为false，特通过play方法开始播放图片）
 onBeforeChange : function(position) {},//改变前
 onAfterChange : function(position) {}//改变后   //通过改变前改变后可以修改上面的文字说明

SliceBox.js 3d 三维轮播图插件

网友评论0

zturn.js

PicCarousel.js

jquery.flipster.js

SliceBox.js

slideBox.js

slick.js

bxslider.js

caroursel.js

windy.js

impress.js