Pogo Slider 是一款 jQuery 图片幻灯片插件-BFW插件库

Pogo Slider 是一款 jQuery 图片幻灯片插件

Pogo Slider 是一款 jQuery 图片幻灯片插件，它最大的特点就是提供 20 多种过度效果，你可以统一或分别设置。同时它也有其他常见幻灯片的功能，如自动播放、箭头控制、原点导航控制、进度条等等。

使用方式：

第一步引入bfwone

第二步use插件及css

第三步配置

属性/方法	类型	默认值	说明
autoplayTimeout	整数	4000	幻灯片自动播放时的间隔
autoplay	布尔值	true	幻灯片自动播放
displayProgess	布尔值	true	显示进度条
baseZindex	整数	1
onSlideStart	函数	null	每张幻灯片开始时的回调函数
onSlideEnd	函数	null	每张幻灯片结束时的回调函数
onSliderPause	函数	null	幻灯片暂停时的回调函数
onSliderResume	函数	null	幻灯片重新开始时的回调函数
slideTransition	字符串	slide	幻灯片过度效果
slideTransitionDuration	整数	1000	幻灯片过度效果持续时间
elementTransitionStart	整数	500
elementTransitionDuration	整数	1000
elementTransitionIn	字符串	slideUp
elementTransitionOut	字符串	slideDown
generateButtons	布尔值	true	显示左右控制箭头
buttonPosition	字符串	CenterHorizontal	箭头的位置，可选 TopLeft / TopRight / BottomLeft / BottomRight / CenterHorizontal / CenterVertical
generateNav	布尔值	true	显示圆点导航
navPosition	字符串	Bottom	圆点导航的位置，可选 Top / Bottom / Left / Right
preserveTargetSize	布尔值	false	保持幻灯片大小比例
responsive	布尔值	false	响应式
targetWidth	整数	1000	指定幻灯片的宽度
targetHeight	整数	300	指定幻灯片的高度
pauseOnHover	布尔值	true	鼠标悬停暂停

示例如下

<!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.pogo-slider.min", "pogo-slider.min"], function() {
                $('#bfwcont').pogoSlider();
            });
        });
    </script>
</head>
<body>
    <h1>默认效果</h1>

    <div class="bfwcont">
        <div class="pogoSlider" id="bfwcont">
            <div class="pogoSlider-slide" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg);"></div>
            <div class="pogoSlider-slide" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg);"></div>
            <div class="pogoSlider-slide" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg);"></div>
            <div class="pogoSlider-slide" style="background-image:url(//repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg);"></div>

        </div>
    </div>


</body>
</html>

Pogo Slider 是一款 jQuery 图片幻灯片插件

网友评论0

zturn.js

PicCarousel.js

jquery.flipster.js

SliceBox.js

slideBox.js

slick.js

bxslider.js

caroursel.js

windy.js

impress.js