jquery.hiSlider.js - 灵活的jQuery滑块插件支持手机效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

hiSlider.js 是一个简单、响应灵敏、适合移动设备的 jQuery 图像滑块插件，支持灵活的布局、触摸事件并附带很多自定义选项。

使用方法

1. 将 jQuery JavaScript 库和 jQuery hiSlider 插件文件添加到网页中。

<link rel="stylesheet" href="css/jquery.hiSlider.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.hiSlider.min.js"></script>

2. hiSlider初始化。

<script type="text/javascript">
    $('.hiSlider').hiSlider(); 
</script>

更多的参数设置

hiSlider参数说明：

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