jquery.bxslider.js 兼容pc端与移动端的幻灯片插件

jquery.bxslider.js 兼容pc端与移动端的幻灯片插件

第一步引入bfiwone

第二步执行插件代码

示例如下

<!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(["jquery.bxslider", "jquery.bxslider"], function() {
                $('.slider1').bxSlider({

                    slideWidth: 200,

                    minSlides: 2,

                    maxSlides: 3,

                    slideMargin: 10

                });
                $('.slider6').bxSlider({

                    mode: 'fade',

                    slideWidth: 600,

                    slideMargin: 10

                });

                $('.slider5').bxSlider({

                    mode: 'vertical',

                    slideWidth: 200,

                    minSlides: 2,

                    slideMargin: 10

                });
                $('.slider2').bxSlider({

                    slideWidth: 300,

                    auto: true,

                    autoControls: true,

                    minSlides: 2,

                    maxSlides: 2,

                    slideMargin: 10

                });

                $('.slider3').bxSlider({

                    slideWidth: 200,

                    minSlides: 2,

                    maxSlides: 3,

                    moveSlides: 1,

                    slideMargin: 10

                });
                $('.slider4').bxSlider({

                    slideWidth: 200,

                    minSlides: 2,

                    maxSlides: 3,

                    moveSlides: 1,

                    startSlide: 1,

                    slideMargin: 10

                });
                $('.slider9').bxSlider({

                    slideWidth: 200,

                    minSlides: 3,

                    maxSlides: 3,

                    ticker: true,

                    speed: 12000,

                    startSlides: 0,

                    slideMargin: 10

                });
                $('.slider8').bxSlider({

                    slideWidth: 600,

                    adaptiveHeight: true,

                    startSlides: 0,

                    slideMargin: 10

                });
                $('.slider7').bxSlider({

                    slideWidth: 600,

                    infiniteLoop: false,

                    hideControlOnEnd: true,

                    slideMargin: 10

                });

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

    <p>
        slider1(maxSlides)
    </p>
    <div class="slider1">
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar1">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar2">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar3">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar4">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar5">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar6">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar7">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar8">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar9">
        </div>
    </div>


    <p>
        slider2(slideWidth auto)
    </p>
    <div class="slider2">
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar1">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar2">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar3">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar4">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar5">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar6">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar7">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar8">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar9">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar10">
        </div>
    </div>


    <p>
        slider3(moveSlides)
    </p>
    <div class="slider3">
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar1">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar2">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar3">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar4">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar5">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar6">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar7">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar8">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar9">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar10">
        </div>
    </div>


    <p>
        slider4(startSlide)
    </p>
    <div class="slider4">
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar1">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar2">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar3">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar4">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar5">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar6">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar7">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar8">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar9">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar10">
        </div>
    </div>


    <p>
        slider5(Vertical)
    </p>
    <div class="slider5">
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar1">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar2">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar3">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar4">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar5">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar6">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar7">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar8">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar9">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar10">
        </div>
    </div>


    <p>
        slider6(Image)
    </p>
    <div class="slider6">
        <div class="slide">
            <img src="http://placehold.it/600x200&text=FooBar1">
        </div>
        <div class="slide">
            <img src="http://placehold.it/600x200&text=FooBar2">
        </div>
        <div class="slide">
            <img src="http://placehold.it/600x200&text=FooBar3">
        </div>
        <div class="slide">
            <img src="http://placehold.it/600x200&text=FooBar4">
        </div>
    </div>


    <p>
        slider7(infiniteLoop hideControlOnEnd)
    </p>
    <div class="slider7">
        <div class="slide">
            <img src="http://placehold.it/600x200&text=FooBar1">
        </div>
        <div class="slide">
            <img src="http://placehold.it/600x200&text=FooBar2">
        </div>
        <div class="slide">
            <img src="http://placehold.it/600x200&text=FooBar3">
        </div>
        <div class="slide">
            <img src="http://placehold.it/600x200&text=FooBar4">
        </div>
    </div>


    <p>
        slider8(adaptiveHeight)
    </p>
    <div class="slider8">
        <div class="slide">
            <img src="http://placehold.it/600x200&text=FooBar1">
        </div>
        <div class="slide">
            <img src="http://placehold.it/600x300&text=FooBar2">
        </div>
        <div class="slide">
            <img src="http://placehold.it/600x150&text=FooBar3">
        </div>
        <div class="slide">
            <img src="http://placehold.it/600x250&text=FooBar4">
        </div>
    </div>


    <p>
        slider9(ticker)
    </p>
    <div class="slider9">
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar1">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar2">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar3">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar4">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar5">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar6">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar7">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar8">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar9">
        </div>
        <div class="slide">
            <img src="http://placehold.it/350x150&text=FooBar10">
        </div>
    </div>

</body>
</html>



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

网友评论0

程序员在线工具箱