PicCarousel.js 旋转木马轮播图插件


旋转木马轮播图 PicCarousel.js

第一步引入bfwone

第二步执行插件方法

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFWONE.JS DEMO PAGE</title>
    <script id="bfwone" data="dep=jquery.17" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>

    <script>
        bready(function() {
            use(["PicCarousel", "PicCarousel"], function() {

                $(".A_Demo").PicCarousel("init");
                $(".B_Demo").PicCarousel({
                    "width": 1000,
                    "height": 300,
                    "posterWidth": 520,
                    "posterHeight": 300,
                    "scale": 0.9,
                    "speed": 500,
                    "autoPlay": true,
                    "delay": 1000,
                    "verticalAlign": "top"
                });



            });
        });
    </script>
</head>
<body>
    <div style="height: 1000px;width: 800px;margin:0 auto;">


        <div class="container">
            <div class="poster-main A_Demo">
                <div class="poster-btn poster-prev-btn"></div>
                <ul class="poster-list">
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="http://repo.bfw.wiki/bfwrepo/image/sample1.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="http://repo.bfw.wiki/bfwrepo/image/sample2.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="http://repo.bfw.wiki/bfwrepo/image/sample3.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="http://repo.bfw.wiki/bfwrepo/image/sample4.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="http://repo.bfw.wiki/bfwrepo/image/sample1.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="http://repo.bfw.wiki/bfwrepo/image/sample2.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="http://repo.bfw.wiki/bfwrepo/image/sample3.png" width="100%"></a></li>
                </ul>
                <div class="poster-btn poster-next-btn"></div>
            </div>

            <div class="poster-main B_Demo" style="margin-top:100px">
                <div class="poster-btn poster-prev-btn"></div>
                <ul class="poster-list">
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="//repo.bfw.wiki/bfwrepo/image/sample1.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="//repo.bfw.wiki/bfwrepo/image/sample2.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="//repo.bfw.wiki/bfwrepo/image/sample3.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="//repo.bfw.wiki/bfwrepo/image/sample4.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="//repo.bfw.wiki/bfwrepo/image/sample1.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="//repo.bfw.wiki/bfwrepo/image/sample2.png" width="100%"></a></li>
                    <li class="poster-item"><a href="http://www.bfw.wiki"><img src="//repo.bfw.wiki/bfwrepo/image/sample3.png" width="100%"></a></li>
                </ul>
                <div class="poster-btn poster-next-btn"></div>
            </div>
        </div>


    </body>
</html>


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

网友评论0

程序员在线工具箱