幻灯片/轮播
响应式jQuery焦点图插件
PetitQ
hiSlider.js 是一款支持移动端的响应式焦点图插件。该焦点图插件支持 flexible 布局，支持移动触摸事件，支持 IE8+浏览器，并且有大量的可用配置参数。
使用方法：
使用 hiSlider.js 幻灯片插件需要引入 jquery.hiSlider.css 和 jQuery 以及 jquery.hiSlider.js 文件。
也想出现在这里？联系我们吧
HTML 结构：
hiSlider.js 幻灯片插件使用的是无序列表的 HTML 结构。
<ul class="hiSlider demo">
<li data-title="1" class="hiSlider-item">
<img src="1.jpg" alt="1">
</li>
<li data-title="2" class="hiSlider-item">
<img src="2.jpg" alt="2">
</li>
<li data-title="3" class="hiSlider-item">
<img src="3.jpg" alt="3">
</li>
<li data-title="4" class="hiSlider-item">
<img src="4.jpg" alt="4">
</li>
<li data-title="5" class="hiSlider-item">
<img src="5.jpg" alt="5">
</li>
</ul>
初始化插件：
在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化 hiSlider.js 幻灯片插件。
$('.demo').hiSlider();
配置参数：
hiSlider.js 焦点图插件的可用配置参数有：
startSlide：开始索引，从 0 开始。默认值：0
item：子元素选择器。默认值：'.hiSlider-item'
isFullScreen：是否全屏，默认值：false
isFlexible：是否自适应，默认值：false
isSupportTouch：是否支持触摸、html5 和 css3transform。默认值：'__proto__' in {}
isShowPage：是否显示分页按钮。默认值：true
isShowTitle：是否显示标题栏。默认值：true
titleAttr：标题文本存放的属性 或者回调函数(需要返回值)，默认值：'data-title'
isShowControls：是否显示左右控制按钮，默认值：true
isAuto：是否自动播放，默认值：true
intervalTime：自动播放间隔时间，默认值：5000
affectTime：特效时间，默认值：500
mode：特效类型，可选值有：fade || move，默认值为："move"
direction：方向，可选值有：left || top，默认值为："left"
onSwipeStart：开始滑动时的回调函数。默认值：$.noop
onSwipeMove：滑动中的回调函数。默认值：$.noop
minSwipeLength：正常滑动的最小值。默认值：30
onSwipeCancel：滑动取消回调 和 minSwipeLength 值有关，默认值：$.noop
onSwipeEnd：触摸结束回调 (正常触摸)，默认值：$.noop
onSwipeLeft：向左滑动时的回调函数。默认值：$.noop
onSwipeRight：向右滑动时的回调函数。默认值：$.noop
onSwipeTop：向上滑动时的回调函数。默认值：$.noop
onSwipeBottom：向下滑动时的回调函数。默认值：$.noop
onInited：初始化后的回调函数，默认值：$.noop
onMoveBefore：幻灯片运动前的回调函数，默认值：$.noop
onMoveAfter：幻灯片运动后的回调函数，默认值：$.noop
onSelected：分页被选中时的回调函数，默认值：$.noop
github 地址为：https://github.com/hishion/jquery.hiSlider.js
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
