[代码样式]Pogo Slider – jQuery幻灯片插件

[代码样式]Pogo Slider – jQuery幻灯片插件

简介

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

浏览器兼容

[代码样式]Pogo Slider – jQuery幻灯片插件 [代码样式]Pogo Slider – jQuery幻灯片插件 [代码样式]Pogo Slider – jQuery幻灯片插件 [代码样式]Pogo Slider – jQuery幻灯片插件 [代码样式]Pogo Slider – jQuery幻灯片插件
IE10+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

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

使用方法

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/pogo-slider.min.css">
<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

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
脚本代码

[代码样式]flipTimer – jQuery时钟翻牌效果插件

2020-8-24 10:16:54

脚本代码

[代码样式]多彩的灯泡图表矢量素材(EPS/AI)

2020-9-9 16:47:41

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索