Skip to content

xiaohai18/jquery.hiSlider.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#jquery.hiSlider.js 1.0 ##js焦点图插件,支持移动端

在线演示:http://www.byex.cn/hiSlider

Written by: hishion

##使用步骤

###引入资源文件

<!-- hiSlider CSS file -->
<link href="css/jquery.hiSlider.min.css" rel="stylesheet" />
<!-- jQuery library -->
<script src="js/jquery.1.9.1.js"></script>
<!-- hiSlider Javascript file -->
<script src="js/jquery.hiSlider.min.js"></script>

###Step 2: 编写html

<ul class="hiSlider">
    <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>

###Step 3: 调用 hiSlider

$(document).ready(function(){
  $('.hiSlider').hiSlider();
});

##配置项

以下参数全部为默认值

$('.hiSlider').hiSlider({
    //开始索引 0开始
    startSlide: 0,
    //子元素选择器
    item: '.hiSlider-item',
    //是否全屏
    isFullScreen: false,
    //是否自适应
    isFlexible: false,
    //是否支持触摸 html5 transform:
    isSupportTouch: '__proto__' in {},
    //是否显示分页按钮
    isShowPage: true,
    //是否显示标题栏
    isShowTitle: true,
    //标题文本存放的属性 或者回调函数(需要返回值)
    titleAttr: 'data-title',
    //是否显示左右控制按钮
    isShowControls: true,
    //是否自动播放
    isAuto: true,
    //自动播放间隔时间
    intervalTime: 5000,
    //特效时间 
    affectTime: 300,
    //特效类型 string : fade || move
    mode: 'move',
    //方向 string: left || top
    direction: 'left',
    //开始滑动回调
    onSwipeStart: $.noop,
    //滑动中回调
    onSwipeMove: $.noop,
    //正常滑动的最小值
    minSwipeLength: 30,
    //滑动取消回调 和 minSwipeLength值有关
    onSwipeCancel: $.noop,
    //触摸结束回调 (正常触摸)
    onSwipeEnd: $.noop,
    //向左滑动回调
    onSwipeLeft: $.noop,
    //向右滑动回调
    onSwipeRight: $.noop,
    //向上滑动回调
    onSwipeTop: $.noop,
    //向下滑动回调
    onSwipeBottom: $.noop,
    //初始化后回调
    onInited:  $.noop,
    //运动前回调
    onMoveBefore: $.noop,
    //运动后回调
    onMoveAfter: $.noop,
    //分页选中回调
    onSelected: $.noop
}); 

About

js轮播图,支持移动端

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages