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