浙江 杭州

支持移动端的响应式jQuery焦点图插件

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2017-05-09

人气6872

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

查看演示
下载资源:1
下载资源
错误提交:

格式:zip 大小:858.71KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1638.html 非特殊说明,本文版权归原作者所有,转载请注明出处
支持移动端的响应式jQuery焦点图插件

我当前G币余额:0 已下载次数:1

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有1 评论)