terseBanner是一款简洁优雅的jquery轮播图插件。它删除了很多不实用或很少用的功能,只保留了最常用的,使用方便,功能完善,可以满足绝大多数网站的需求。该轮播图插件支持ie8浏览器,支持触屏事件。
使用方法
在页面中引入jquery和jquery.terseBanner.min.js文件。
<script type="text/jscript" src="js/jquery.min.js"></script> <script type="text/jscript" src="js/jquery.terseBanner.min.js"></script>
HTML结构
该轮播图最基本的HTML结构如下:
<div class="banner"> <ul> <li><img src="img/banner-1.jpg"></li> <li><img src="img/banner-2.jpg"></li> <li><img src="img/banner-3.jpg"></li> <li><img src="img/banner-4.jpg"></li> <li><img src="img/banner-5.jpg"></li> <li><img src="img/banner-6.jpg"></li> </ul> </div>
CSS样式
为该轮播图指定宽度和高度。你也可以制作为宽度高度自适应模式,具体方法查看demo页。
.banner{width: 960px;height: 540px;}
初始化插件
在页面DOM元素加载完毕之后,通过terseBanner()
方法来初始化该轮播图插件。
$('.banner').terseBanner();
配置参数
命名 | 类型 | 可选值 | 默认值 | 说明 |
animation | [String] | 'slide', 'fade', 'flash', 'none' | 'slide' | 动画模式(不支持垂直方向的图片滑动切换) |
adaptive | [Boolean] | false | 轮播图片的宽度自适应 | |
useHover | [Boolean] | false | 导航按钮和缩略图使用 hover 事件触发动画 | |
arrow | [Boolean] | false | 显示导航箭头 | |
btn | [Boolean] | true, false, 'ol' | false | 显示导航按钮(使用 'ol' 在导航按钮中添加序列数字) |
auto | [Number] | 0或正整数 | 5000 | 自动轮播每次的间隔[毫秒](为0时禁用自动轮播) |
duration | [Number] | 正整数 | 800 | 动画速度[毫秒] |
init | [Function] | $.noop |
轮播初始化时执行的回调函数 function ($banner, $item) { } - $banner:轮播容器 - $item:轮播图片列表项 |
|
before | [Function] | $.noop |
动画开始时执行的回调函数 function ($banner, $item, currentIndex) { } - $banner, $item与init回调函数的一样 - currentIndex:当前显示图片的索引 |
|
after | [Function] | $.noop |
动画完成时执行的回调函数 function ($banner, $item, currentIndex) { } - 参数与before回调函数的一样 |
|
thumb | [Object] | { } | 缩略图 参数是对象类型,包含4个属性 - width: 缩略图的宽度 - height: 缩略图的高亮 - gap: 缩略图的水平外边距 - visible : 缩略图显示的数量 |
terseBanner轮播图插件的github地址为:https://github.com/happyfreelife/terseBanner
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!