allinone_bannerRotator.js allinone 是一款强大的 jQuery 幻灯片插件-BFW插件库

allinone_bannerRotator.js allinone 是一款强大的 jQuery 幻灯片插件

它含有 5 种类型的效果，每个类型都有 3 款皮肤，也就是说它有 15 效果之多。allinone 的每款皮肤都很漂亮，所以说，如果使用 allinone，你几乎不用再写皮肤了。 allinone 支持多达 16 种过渡效果、支持文字左右上下四个方向的动画效果、支持 touch 滑动事件；可设置是否自动播放、是否循环播放、是否显示控制器。allinone 还有一个定时器，它也是可以设置的。 allinone 还支持响应式设计，所以它在不同的设备、分辨率上都能很好的显示，5种类型的js分别为：

allinone_bannerRotator.js 横幅
allinone_thumbnailsBanner.js 带缩略图
allinone_bannerWithPlaylist.js 带播放列表
allinone_contentSlider.js 带内容
allinone_carousel.js 3D旋转木马

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

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17|jquery-ui.min&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["allinone_bannerRotator", "allinone_bannerRotator"], function() {
                $('#allinone_bannerRotator_classic').allinone_bannerRotator({
                    skin: 'classic',
                    width: 960,
                    height: 384,
                    responsive: true, thumbsWrapperMarginBottom: 5,
                    defaultEffect: 'random',
                   

                });

            });
        });
    </script>
</head>
<body>
    <!-- 代码开始 -->
    <div style="width: 960px;margin: 0 auto;">
        <div id="allinone_bannerRotator_classic" style="display:none;">
            <!-- 图片 -->
            <ul class="allinone_bannerRotator_list">
                <li data-bottom-thumb="//repo.bfw.wiki/bfwrepo/image/01_classic.jpg" data-text-id="#allinone_bannerRotator_photoText1"
                    data-link="#" data-target="_blank">
                    <img src="//repo.bfw.wiki/bfwrepo/image/01_classic.jpg" alt="" />
                </li>
                <li data-bottom-thumb="//repo.bfw.wiki/bfwrepo/image/02_classic.jpg" data-text-id="#allinone_bannerRotator_photoText2"
                    data-link="#" data-target="_blank">
                    <img src="//repo.bfw.wiki/bfwrepo/image/02_classic.jpg" alt="" />
                </li>

            </ul>



            <!-- 文字 -->

            <div id="allinone_bannerRotator_photoText1" class="allinone_bannerRotator_texts">

                <div class="allinone_bannerRotator_text_line textElement11_classic" data-initial-left="50"
                    data-initial-top="10" data-final-left="50" data-final-top="40" data-duration="0.5" data-fade-start="0"
                    data-delay="0">
                    多达5种类型的banner效果
                </div>

                <div class="allinone_bannerRotator_text_line textElement12_classic" data-initial-left="50"
                    data-initial-top="10" data-final-left="50" data-final-top="70" data-duration="0.5" data-fade-start="0"
                    data-delay="0.3">
                    每种效果都有多款皮肤
                </div>

            </div>

            <div id="allinone_bannerRotator_photoText2" class="allinone_bannerRotator_texts">

                <div class="allinone_bannerRotator_text_line textElement21_classic" data-initial-left="550"
                    data-initial-top="60" data-final-left="550" data-final-top="60" data-duration="0.5" data-fade-start="0"
                    data-delay="0">
                    16种过度效果
                </div>

                <div class="allinone_bannerRotator_text_line textElement22_classic" data-initial-left="550"
                    data-initial-top="125" data-final-left="550" data-final-top="125" data-duration="0.5"
                    data-fade-start="0" data-delay="0.3">
                    可为每个图片分别设置
                </div>

            </div>

        </div>
    </div>

    <!-- 代码结束 -->



</body>
</html>

官网：https://www.responsivejqueryslider.com/carousel.html