幻灯片/轮播

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

面包多

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)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!