allinone_carousel.js 旋转木马幻灯片插件,自适应

allinone_carousel.js 旋转木马幻灯片插件,自适应

allinone_carousel.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&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["allinone_carousel", "allinone_carousel"], function() {
                jQuery('#allinone_carousel_charming').allinone_carousel({

                    skin: 'charming',

                    width: 990,

                    height: 454,

                    responsive: true,

                    autoPlay: 3,

                    resizeImages: true,

                    autoHideBottomNav: false,

                    showElementTitle: false,

                    verticalAdjustment: 50,

                    showPreviewThumbs: false,

                    //easing:'easeOutBounce',

                    numberOfVisibleItems: 5,

                    nextPrevMarginTop: 23,

                    playMovieMarginTop: 0,

                    bottomNavMarginBottom: -10

                });


            });
        });
    </script>
</head>
<body>



    <div id="containingDiv">

        <div id="allinone_carousel_charming">

            <div class="myloader"></div>

            <ul class="allinone_carousel_list">

                <li><img src="//repo.bfw.wiki/bfwrepo/image/01_classic.jpg" alt="" /></li>

                <li><img src="//repo.bfw.wiki/bfwrepo/image/02_classic.jpg" alt="" /></li>

                <li><img src="//repo.bfw.wiki/bfwrepo/image/01_classic.jpg" alt="" /></li>

                <li><img src="//repo.bfw.wiki/bfwrepo/image/02_classic.jpg" alt="" /></li>


                <li><img src="//repo.bfw.wiki/bfwrepo/image/01_classic.jpg" alt="" /></li>

                <li><img src="//repo.bfw.wiki/bfwrepo/image/02_classic.jpg" alt="" /></li>


                <li><img src="//repo.bfw.wiki/bfwrepo/image/01_classic.jpg" alt="" /></li>

                <li><img src="//repo.bfw.wiki/bfwrepo/image/02_classic.jpg" alt="" /></li>


            </ul>

        </div>

    </div>


</body>
</html>


立即下载allinone_carousel.js查看所有js插件

网友评论0

程序员在线工具箱