windy.js 炫酷幻灯片效果插件-BFW插件库

windy.js 炫酷幻灯片效果插件

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|jquery-ui.min|modernizr.custom&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        var windy;
        bready(function() {
            use(["jquery.windy", "jquery.ui.slider|windy"], function() {
                var $el = $('#wi-el'),
                windy = $el.windy( {
                    // rotation and translation boundaries for the items transitions
                    boundaries: {
                        rotateX: {
                            min: 40, max: 90
                        },
                        rotateY: {
                            min: -15, max: 15
                        },
                        rotateZ: {
                            min: -5, max: 5
                        },
                        translateX: {
                            min: -200, max: 200
                        },
                        translateY: {
                            min: -300, max: -200
                        },
                        translateZ: {
                            min: 50, max: 100
                        }
                    }
                });

                $('#slider').slider( {
                    animate: true,
                    min: 0,
                    max: windy.getItemsCount() - 1,
                    slide: function(event, ui) {
                        windy.navigate(ui.value);

                    }

                });
            });
        });
    </script>
    <style>
        .windy-demo {
            width: 416px;
            margin: 40px auto;
            color: #aaa
        }

        .windy-demo ul.wi-container {
            width: 420px;
            height: 320px;
            box-shadow: 0 1px 1px rgba(0,0,0,.1)
        }

        .windy-demo ul.wi-container img {
            width: 420px;
            height: 320px;

        }

        .windy-demo h4 {
            padding: 0 10px;
            line-height: 26px;
            margin: 0
        }

        .windy-demo ul.wi-container li {
            padding: 0;
            border: 10px solid #fff;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        #slider {
            width: 200px;
            margin: 50px auto 0;
            border-radius: 10px;
            border: 0;
            box-shadow: 0 1px 1px rgba(255,255,255,.8),inset 0 1px 2px rgba(0,0,0,.3),0 0 0 8px rgba(0,0,0,.1),0 1px 1px 8px rgba(255,255,255,.8);
            background: #b0d4e3;
            background: -moz-linear-gradient(top,#b0d4e3 0%,#88bacf 100%);
            background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#b0d4e3),color-stop(100%,#88bacf));
            background: -webkit-linear-gradient(top,#b0d4e3 0%,#88bacf 100%);
            background: -o-linear-gradient(top,#b0d4e3 0%,#88bacf 100%);
            background: -ms-linear-gradient(top,#b0d4e3 0%,#88bacf 100%);
            background: linear-gradient(tobottom,#b0d4e3 0%,#88bacf 100%);
        }

        #slider a {
            outline: 0;
            cursor: pointer;
            border: 0;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 3px 4px rgba(0,0,0,.4)
        }

    </style>
</head>
<body>
    <div class="windy-demo windy-demo-3">
        <ul id="wi-el" class="wi-container">
            <li><a href="http://drbl.in/byYT"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="image1" /></a></li>
            <li><a href="http://drbl.in/bAXK"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" alt="image2" /></a></li>
            <li><a href="http://drbl.in/bCop"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" alt="image3" /></a></li>
            <li><a href="http://drbl.in/bGik"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" alt="image4" /></a></li>
            <li><a href="http://drbl.in/bRFJ"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/5.jpg" alt="image5" /></a></li>
            <li><a href="http://drbl.in/byYT"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="image1" /></a></li>
            <li><a href="http://drbl.in/bAXK"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" alt="image2" /></a></li>
            <li><a href="http://drbl.in/bCop"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" alt="image3" /></a></li>
            <li><a href="http://drbl.in/bGik"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" alt="image4" /></a></li>
            <li><a href="http://drbl.in/bRFJ"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/5.jpg" alt="image5" /></a></li>
            <li><a href="http://drbl.in/byYT"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="image1" /></a></li>
            <li><a href="http://drbl.in/bAXK"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" alt="image2" /></a></li>
            <li><a href="http://drbl.in/bCop"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" alt="image3" /></a></li>
            <li><a href="http://drbl.in/bGik"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" alt="image4" /></a></li>
            <li><a href="http://drbl.in/bRFJ"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/5.jpg" alt="image5" /></a></li>
            <li><a href="http://drbl.in/byYT"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="image1" /></a></li>
            <li><a href="http://drbl.in/bAXK"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" alt="image2" /></a></li>
            <li><a href="http://drbl.in/bCop"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" alt="image3" /></a></li>
            <li><a href="http://drbl.in/bGik"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" alt="image4" /></a></li>
            <li><a href="http://drbl.in/bRFJ"><img src="http://repo.bfw.wiki/bfwrepo/image/slicebox/5.jpg" alt="image5" /></a></li>
        </ul>
        <div id="slider"></div>
    </div>
</body>
</html>

常用方法

windy.prev();上一张图
windy.next();下一张图
windy.navigate(int) 切换到第几张

切换效果参数

boundaries: {
    rotateX: {
        min: 40,
        max: 90
    },
    rotateY: {
        min: -15,
        max: 15
    },
    rotateZ: {
        min: -5,
        max: 5
    },
    translateX: {
        min: -200,
        max: 200
    },
    translateY: {
        min: -300,
        max: -200
    },
    translateZ: {
        min: 50,
        max: 100
    }
}

windy.js 炫酷幻灯片效果插件

网友评论0

zturn.js

PicCarousel.js

jquery.flipster.js

SliceBox.js

slideBox.js

slick.js

bxslider.js

caroursel.js

windy.js

impress.js