Pogo Slider – jQuery幻灯片插件

分类：代码日期：2015-05-07

Pogo Slider - jQuery幻灯片插件

简介

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

浏览器兼容


IE10+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

注：可通过处理兼容 IE7 – IE9，虽然没有绚丽的动画过度效果，但可正常使用。

使用方法

1、引入文件

<link rel="stylesheet" href="css/pogo-slider.min.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.pogo-slider.min.js"></script>

2、HTML

<div class="pogoSlider" id="dowebok">
    <div class="pogoSlider-slide" style="background-image:url(img/1.jpg);"></div>
    <div class="pogoSlider-slide" style="background-image:url(img/2.jpg);"></div>
    <div class="pogoSlider-slide" style="background-image:url(img/3.jpg);"></div>
    <div class="pogoSlider-slide" style="background-image:url(img/4.jpg);"></div>
    <div class="pogoSlider-slide" style="background-image:url(img/5.jpg);"></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	鼠标悬停暂停