jQuery移动端的响应式焦点图插件hiSlider.js
插件描述：hiSlider.js是一款支持移动端的响应式jQuery焦点图插件。该焦点图插件支持flexible布局，支持移动触摸事件，支持IE8+浏览器，并且有大量的可用配置参数。
简要教程
hiSlider.js是一款支持移动端的响应式焦点图插件。该焦点图插件支持flexible布局，支持移动触摸事件，支持IE8+浏览器，并且有大量的可用配置参数。
使用方法
使用hiSlider.js幻灯片插件需要引入jquery.hiSlider.css和jQuery以及jquery.hiSlider.js文件。
<link rel="stylesheet" href="css/jquery.hiSlider.min.css"> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <script src="js/jquery.hiSlider.min.js"></script>
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。
赞赏Ta
赞赏Ta