🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

hiSlider.js is a simple, responsive, mobile-friendly jQuery image slider plugin that supports flexible layout, touch events and with lots of customization options.

Image-Slider

Documentation

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

You May Also Like