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