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
。
jquery.hiSlider.js插件的github地址为:https://github.com/hishion/jquery.hiSlider.js