dowebok

Pogo Slider – jQuery幻灯片插件

分类:代码 日期: 点击(27,049) 评论(4)

Pogo Slider - jQuery幻灯片插件

演 示 下 载

简介

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

浏览器兼容

IE Chrome Firefox Opera Safari
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 鼠标悬停暂停

演 示 下 载

Pogo Slider 主页:http://fluice.com/pogo-slider/

GitHub 地址:https://github.com/mdgriffin/pogo-slider

标签:

相关文章