幻灯片/轮播
多功能响应式jQuery幻灯片插件
PetitQ
zenith-slider 是一款支持移动手机的多功能响应式 jQuery 幻灯片插件。该幻灯片插件不同于其它幻灯片的地方是使用不同的布局来提高网页或 app 的性能，你还可以在参数中通过 CSS 来自定义幻灯片的样式。它的特点有：
为不同的设备内置了 4 种不同的布局效果：default, hand, screen, slider
也想出现在这里？联系我们吧
响应式设计和完全支持移动触摸事件
使用基于 animate.css 的 CSS3 动画特效
支持自动播放模式，鼠标悬停时暂停播放
支持圆点导航，箭头导航和缩略图导航
提供大量的参数选项和回调函数
使用方法:
使用该幻灯片插件需要引入下面的一些依赖文件。
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
<script src="js/jquery-min.js"></script>
<script src="js/zenith.js"></script>
HTML 结构:
Default 布局的 HTML 结构如下：
<div id="demo" class="tf_slider">
<div class="tf_container">
<div class="tf_slide">Item 1</div>
<div class="tf_slide">Item 2</div>
<div class="tf_slide">Item 3</div>
<div class="tf_slide">Item 4</div>
<div class="tf_slide">Item 5</div>
...<span id="left"></span>
<span id="right"></span>
<div id="bullet-navs"></div>
</div>
</div>
初始化插件:
在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化该幻灯片插件。
$('#element').zenith();
配置参数:
下面的参数适用于所有的幻灯片布局。其它每个布局的独有配置参数在后面列出。
| 参数 | 默认值 | 描述 |
| layout | 'default' | 选择一种幻灯片的布局方式。可选值有：‘default’, ‘hand’, ‘screen’, ‘slider’ |
| direction | 'horizontal' | 幻灯片的运动方向。可选值有：‘horizontal’,‘vertical’ |
| Animation | 'Slide' | 幻灯片的过渡动画效果。可用的过渡动画效果有： ‘Slide’, ‘Bounce’, ‘Fade’, ‘RotateDown’, ‘RotateUp’, ‘Zoom’, ‘Flip’ |
| background | 幻灯片的背景颜色。可以使用任何合法的颜色值 | |
| activeIndex | 0 | 设置在页面加载完成后默认激活的幻灯片 slide 序号 |
| autoplay | true | 设置是否自动播放幻灯片 |
| autoplayStop | false | 在鼠标进入幻灯片区域时停止自动播放幻灯片。它不同于autoplayPause，该参数会立刻停止自动播放幻灯片 |
| autoplayPause | true | 在鼠标进入幻灯片区域时暂停播放幻灯片，鼠标离开后继续播放幻灯片 |
| autoplaySpeed | 3000 | 幻灯片两个 slide 之间的延迟时间 |
| slideSpeed | 500 | 过渡动画的持续时间 |
Default 布局和 Hand 布局配置参数:
| 参数 | 默认值 | 描述 |
| circleColor | 'cornsilkblue' | 在高亮图标周围圆形或方形的颜色 |
| iconColor | '#fffff0' | 高亮图标的颜色 |
| activeColor | 'crimson' | 当前激活的高亮图标的颜色 |
Screen 布局配置参数
| 参数 | 默认值 | 描述 |
| bullets | true | 是否显示圆点导航按钮 |
| bulletsColor | '#f7f7f7' | 圆点导航按钮的颜色 |
| bulletsAC | 'cornflowerblue' | 当前激活的圆点导航按钮的颜色 |
| arrows | true | 是否显示箭头导航按钮 |
Slider 布局配置参数
| 参数 | 默认值 | 描述 |
| bullets | true | 是否显示圆点导航按钮 |
| bulletsColor | '#f7f7f7' | 圆点导航按钮的颜色 |
| bulletsAC | 'cornflowerblue' | 当前激活的圆点导航按钮的颜色 |
| arrows | true | 是否显示箭头导航按钮 |
| markup | ['.tf_container', '.tf_slide'] |
自定义的容器 class 或 id，或 slide 的 class 或 Id |
| width | '65%' | 幻灯片的宽度，可以设置为 px，em 或 % |
| height | '320px' | 幻灯片的高度，可以设置为 px，em 或 % |
| margin | '60px' | 幻灯片和其它元素上下间距 |
| fullWidth | false | 是否设置幻灯片为全屏宽度 |
| style | 'shadow' | 选择幻灯片容器的预定义样式。可选值有：‘shadow’, ‘border’, ‘frame’ |
| customStyle | [] | 添加自定义样式 |
| customNavs | [‘#bullet-navs’, ‘li’] | 该参数可以修改默认的圆点导航的 HTML 标签 |
| navPosition | 'bottom' | 圆点导航按钮的位置。水平幻灯片的可选值为：'bottom', ‘top’。垂直幻灯片的可选值为：‘left’, ‘right’ |
| thumbsBG | true | 是否显示缩略图的背景 |
| thumbsSize | { xsmall: 45, small: 65, medium: 92, large : 108, xlarge: 128 } |
缩略图的尺寸。xsmall 用于 480px 的屏幕中，small 用于 960 像素的屏幕中， medium 用于 1200 像素的屏幕中，large 用于 1600 像素的屏幕，xlarge 用于 1960 像素的屏幕 |
| fixedThumbs | true | 设置缩略图位置为固定位置 |
事件:
下面是一些可用的回调函数。
| 函数 | 描述 |
| prevSlide | 在调用前一张幻灯片时触发 |
| nextSlide | 在调用下一张幻灯片时触发 |
| firstSlide | 在调用第一张幻灯片时触发 |
| lastSlide | 在调用最后一张幻灯片时触发 |
| animationEnd | 当前 slide 结束过渡动画时触发 |
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
