HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 资源下载 开发工具 查看内容

terseBanner-简洁优雅的jquery轮播图插件

2016-12-20 10:31| 发布者: admin| 查看: 970| 评论: 0

摘要: terseBanner是一款简洁优雅的jquery轮播图插件。它删除了很多不实用或很少用的功能,只保留了最常用的,使用方便,功能完善,可以满足绝大多数网站的需求。该轮播图插件支持ie8浏览器,支持触屏事件。 ... ...
 简要教程

terseBanner是一款简洁优雅的jquery轮播图插件。它删除了很多不实用或很少用的功能,只保留了最常用的,使用方便,功能完善,可以满足绝大多数网站的需求。该轮播图插件支持ie8浏览器,支持触屏事件。

 使用方法

在页面中引入jquery和jquery.terseBanner.min.js文件。


 HTML结构

该轮播图最基本的HTML结构如下:

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




鲜花

握手

雷人

路过

鸡蛋

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-4-28 06:52

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部