![[代码样式]Pogo Slider – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/RROzgX1688.jpg "[代码样式]Pogo Slider – jQuery幻灯片插件")
简介
Pogo Slider 是一款 jQuery 幻灯片插件，它最大的特点就是提供 20 多种过度效果，你可以统一或分别设置。同时它也有其他常见幻灯片的功能，如自动播放、箭头控制、原点导航控制、进度条等等。
浏览器兼容
![[代码样式]Pogo Slider – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/IzDcBo1563.png "[代码样式]Pogo Slider – jQuery幻灯片插件"){kind=small} |
![[代码样式]Pogo Slider – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/IirTfA1563.png "[代码样式]Pogo Slider – jQuery幻灯片插件"){kind=small} |
![[代码样式]Pogo Slider – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/WcmnA81563.png "[代码样式]Pogo Slider – jQuery幻灯片插件"){kind=small} |
![[代码样式]Pogo Slider – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/rsS4Fl1563.png "[代码样式]Pogo Slider – jQuery幻灯片插件"){kind=small} |
![[代码样式]Pogo Slider – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/iFqT6I1563.png "[代码样式]Pogo Slider – jQuery幻灯片插件"){kind=small} |
|---|---|---|---|---|
| IE10+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
注：可通过处理兼容 IE7 – IE9，虽然没有绚丽的动画过度效果，但可正常使用。
使用方法
1、引入文件
<link rel="stylesheet" href="https://www.dowebok.com/css/pogo-slider.min.css" rel="external nofollow" > <script src="https://www.dowebok.com/js/jquery-1.8.3.min.js"></script> <script src="https://www.dowebok.com/js/jquery.pogo-slider.min.js"></script>
2、HTML
<div class="pogoSlider" id="dowebok"> <div class="pogoSlider-slide"></div> <div class="pogoSlider-slide"></div> <div class="pogoSlider-slide"></div> <div class="pogoSlider-slide"></div> <div class="pogoSlider-slide"></div> </div>
3、JavaScript
$(function(){
$('#dowebok').pogoSlider();
});
配置
| 属性/方法 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| 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 | 鼠标悬停暂停 |
Pogo Slider 主页：//fluice.com/pogo-slider/
GitHub 地址：https://github.com/mdgriffin/pogo-slider
[b2_file link="
百度网盘" name="Pogo Slider – jQuery幻灯片插件" pass="" code=""]
