responsive-layered-slider.js是一款响应式分层幻灯片插件-BFW插件库

responsive-layered-slider.js是一款响应式分层幻灯片插件

responsive-layered-slider.js是一款响应式分层幻灯片插件，该响应式分层幻灯片来自 Simbyone，每张幻灯片里可以有多个元素（文字、图片等），并且可以设置不同的动画效果。整个幻灯片只需要一个 JavaScript 文件就可以工作，当然，是说除去 jquery 等必须依赖的文件外，你可以不需要任何样式，所有的动画都是通过 JavaScript 创建并插入到元素中的。

每张幻灯片的子元素都可以分别设置动画效果，动画效果共有 18 种，你可以任意组合：

bounceIn
fadeIn
rollIn
fadeInDown
fadeInDownBig
fadeInUp
fadeInUpBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
flipInX
flipInY
zoomIn
zoomInDown
zoomInUp
zoomInLeft
zoomInRight

使用方式

第一步引入bfwone 加载依赖项jquery

第二步use插件及css

第三步编写html结构

示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["responsive-layered-slider", "responsive-layered-slider"]);
        });
    </script>
</head>
<body>
    <h1 style="display:none;">响应式分层幻灯片演示-淡入淡出</h1>

    <div class="sim-slider" data-width="2550" data-height="1240" data-animation="250" data-current="true" data-progress="true">
        <div class="sim-slider-inner">
            <div class="sim-slider-slide">
                <div class="sim-slider-layer" data-effect="fadeInDown" data-width="1052" data-height="174" data-left="751" data-top="50">
                    <img src="//repo.bfw.wiki/bfwrepo/image/layer_0025.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="694" data-height="841" data-left="54" data-top="277">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0027.jpg" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInUp" data-width="1019" data-height="848" data-left="770" data-top="277">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0026.jpg" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInRight" data-width="694" data-height="841" data-left="1811" data-top="277">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0028.jpg" />
                </div>
            </div>

         
            <div class="sim-slider-slide">
                <div class="sim-slider-layer" data-effect="fadeInDown" data-width="757" data-height="97" data-left="528" data-top="138">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0011.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="883" data-height="64" data-left="399" data-top="361">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0017.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="827" data-height="64" data-left="458" data-top="444">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0018.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="793" data-height="64" data-left="489" data-top="519">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0016.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="715" data-height="64" data-left="569" data-top="596">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0015.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="680" data-height="64" data-left="604" data-top="674">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0014.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="650" data-height="64" data-left="634" data-top="754">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0013.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="417" data-height="64" data-left="867" data-top="837">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0012.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInRight" data-width="762" data-height="1035" data-left="1424" data-top="100">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0019.jpg" />
                </div>
            </div>

            <div class="sim-slider-slide">
                <div class="sim-slider-layer" data-effect="fadeInDown" data-width="773" data-height="1050" data-left="179" data-top="119">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0029.jpg" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInUp" data-width="773" data-height="1050" data-left="935" data-top="60">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0010.jpg" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInDown" data-width="773" data-height="1049" data-left="1707" data-top="119">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0009.jpg" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInDown" data-width="159" data-height="43" data-left="439" data-top="50">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0008.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInUp" data-width="144" data-height="43" data-left="1260" data-top="1070">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0007.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInDown" data-width="373" data-height="44" data-left="1856" data-top="50">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0006.png" />
                </div>
            </div>

            <div class="sim-slider-slide">
                <div class="sim-slider-layer" data-effect="fadeInDown" data-width="1053" data-height="172" data-left="742" data-top="086">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0000.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="767" data-height="640" data-left="115" data-top="397">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0005.jpg" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInDown" data-width="767" data-height="640" data-left="896" data-top="397">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0003.jpg" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInRight" data-width="767" data-height="640" data-left="1678" data-top="397">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0004.jpg" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInUp" data-width="865" data-height="524" data-left="458" data-top="676">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0001.png" />
                </div>
                <div class="sim-slider-layer" data-effect="fadeInUp" data-width="345" data-height="469" data-left="1506" data-top="676">
                    <img src="//repo.bfw.wiki/bfwrepo/image//layer_0002.png" />
                </div>
            </div>
        </div>
    </div>


</body>
</html>

官网 http://simbyone.com/responsive-layered-slider/