slide.js
简介
slide.js 是一个Web 端基于 jQuery 的轻量轮播插件，可实现 web 端的单页滚动、多页滚动、焦点轮播等效果。
最近更新
V4.0 (2017年10月08日)
兼容性
兼容 IE9 及以上的浏览器。IE8及以下浏览器使用请添加 es5-shim 和 es5-sham。
使用方法
引入文件
- jQuery.js(1.8.0+)
- slide.css
- slide.js
<link rel="stylesheet" href="slide.css"> ... <script src="jquery-1.8.0.min.js"></script> <script src="slide.js"></script>HTML结构
<div class="slide"> <ul class="slide-wrapper"> <li>Slide 1</li> <li>Slide 2</li> <li>Slide 3</li> <li>Slide 4</li> <li>Slide 5</li> <li>Slide 6</li> <li>Slide 7</li> </ul> <a href="javascript:;" title="" class="prev"><</a> <a href="javascript:;" title="" class="next">></a> <div class="page"></div> </div>JavaScript
//配置参数 var mySlide = $('.slide').slide({ speed: 500, prev: '.prev', next: '.next', interval: 3000, pagination: '.page' }); //使用轮播的方法 $('.btn').on('click', function() { mySlide.stop(); });API
配置参数
| 参数 | 类型 | 默认值 | 含义 | 备注 |
|---|---|---|---|---|
| wrapper | String | '.slide-wrapper' | 轮播列表 | selector |
| direction | String | 'h' | 滚动方向 | ‘h’: 水平方向；'v':竖直方向 |
| speed | Number | 500 | 滚动速度 | 单位ms |
| prev | String | '' | 前翻页按钮 | selector |
| next | String | '' | 后翻页按钮 | selector |
| effect | String | 'fade' | 轮播模式 | 'fade': 焦点；'slide': 单页；'carousel':多页。 |
| slidesPerGroup | Number | 1 | 每次滚动的数量 | |
| slidesPerView | Number | 1 | 一个轮播能看到的列表 | |
| interval | Number | 0 | 轮播时间间隔 | 单位ms，大于0时有效，建议大于speed值。 |
| pagination | String | '' | 分页器 | 分页器selector，如果分页按钮为空，会自动创建。 |
| lazyload | Boolean | false | 图片懒加载 | 值为true时表示需要使用懒加载。如果图片地址在img标签里，请用data-src存放图片地址；如果是作为background,请用data-bg存放地址。 |
| enableHideWidget | Boolean | false | 鼠标悬停在轮播上方显示控件，移出时隐藏控件 | |
| easing | String | 'swing' | 轮播速度曲线 | 如果需要改动这个参数建议引入jquery.easing.js。 |
| beforeSlide | function | function(){} | 执行轮播前触发的函数 | 同上。 |
| afterSlide | function | function(){} | 执行轮播后触发的函数 | 同上。 |
方法
| 名称 | 功能 |
|---|---|
| stop | 暂停轮播 |
| play | 继续轮播 |
| slidePrev | 向前滚动 |
| slideNext | 向后滚动 |
| slideTo(number) | 滚动到指定位置 |
更新日志
License
MIT licensed
Copyright (C) 2017 linzb93
