幻灯片/轮播

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

创客主机


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

使用方法:

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

  1. <script type="text/jscript" src="js/jquery.min.js"></script>
  2. <script type="text/jscript" src="js/jquery.terseBanner.min.js"></script>

HTML结构:

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

  1. <div class="banner">
  2.     <ul>
  3.         <li><img src="img/banner-1.jpg"></li>
  4.         <li><img src="img/banner-2.jpg"></li>
  5.         <li><img src="img/banner-3.jpg"></li>
  6.         <li><img src="img/banner-4.jpg"></li>
  7.         <li><img src="img/banner-5.jpg"></li>
  8.         <li><img src="img/banner-6.jpg"></li>
  9.     </ul>
  10. </div>

CSS样式:

为该轮播图指定宽度和高度。你也可以制作为宽度高度自适应模式,具体方法查看demo页。

  1. .banner{width: 960px;height: 540px;}

初始化插件:

在页面DOM元素加载完毕之后,通过terseBanner()方法来初始化该轮播图插件。

  1. $('.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 : 缩略图显示的数量

Github地址:https://github.com/happyfreelife/terseBanner

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!