#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
});