jQuery响应式焦点图插件hiSlider.js

使用方法：

引入CSS样式文件

<link rel="stylesheet" href="css/jquery.hiSlider.min.css">

引入jQuery库文件、插件JS文件

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.hiSlider.min.js"></script>

插件初始化配置

$('.hiSlider1').hiSlider();

HTML结构

<ul class="hiSlider hiSlider1">
  <li data-title="11111" class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>
  <li data-title="22222" class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>
  <li data-title="33333" class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>
  <li data-title="44444" class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>
  <li data-title="55555" class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>
</ul>

配置参数

• 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。