.hislider .css,jQuery移动端的响应式焦点图插件hiSlider.js

2e5f058aea23f3710f8c7ed4cda2babc.png

8d356dd126880af192ae902c3e671bd1.png

插件描述:hiSlider.js是一款支持移动端的响应式jQuery焦点图插件。该焦点图插件支持flexible布局,支持移动触摸事件,支持IE8+浏览器,并且有大量的可用配置参数。

简要教程

hiSlider.js是一款支持移动端的响应式焦点图插件。该焦点图插件支持flexible布局,支持移动触摸事件,支持IE8+浏览器,并且有大量的可用配置参数。

使用方法

使用hiSlider.js幻灯片插件需要引入jquery.hiSlider.css和jQuery以及jquery.hiSlider.js文件。

HTML结构

hiSlider.js幻灯片插件使用的是无序列表的HTML结构。

  •     

  •     

  •     

  •     

  •     

初始化插件

在页面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。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值