幻灯片/轮播
jQuery+CSS3超酷3D堆叠式幻灯片插件
PetitQ
hubSlider 是一款 jQuery 和 CSS3 超酷 3D 堆叠式幻灯片插件。该幻灯片将各个 slide 堆叠在一起，利用 jquery，CSS3 transforms 和 transitions 来制作上下切换的堆叠幻灯片效果。
使用方法：
使用该幻灯片插件需要在页面中引入 jquery，hubslider.js 文件。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="jshubslider.js"></script>
也想出现在这里？联系我们吧
HTML 结构：
该幻灯片的基本 HTML 结构如下：
<div class="hub-slider">
<div class="hub-slider-slides">
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5</li>
</ul>
</div>
<div class="hub-slider-controls">
<button class="hub-slider-arrow hub-slider-arrow_next">↑</button>
<button class="hub-slider-arrow hub-slider-arrow_prev">↓</button>
</div>
</div>
CSS 样式：
以下是该幻灯片的一些必要的 CSS 样式。
.hub-slider { position: relative; }
.hub-slider ul { list-style: none; }
.hub-slider ul li {
width: 800px;
height: 300px;
background: #add8e6;
position: absolute;
left: 0;
top: 0;
}.hub-slider-controls {
position: absolute;
right: 0;
top: 0;
z-index: 1000;
}.hub-slider-arrow {
width: 40px;
height: 40px;
border: none;
background: #f00;
color: #fff;
font-weight: bold;
}
初始化插件：
在页面 DOM 元素加载完毕之后，可以通过 hubSlider()方法来初始化该幻灯片插件。
$('.hub-slider-slides ul').hubSlider({
selector: $('li'),
button: {
next: $('.hub-slider-arrow_next'),
prev: $('.hub-slider-arrow_prev')
}});
配置参数：
该幻灯片插件的可用的配置参数如下：
selector：幻灯片 slide 的选择器，默认为 null
button：前后导航按钮，button.next 是向后按钮的选择器，button.prev 是向前按钮的选择器
auto：是否自动播放，默认为 false
time：自动播放的持续时间，默认为 3 秒
opacity：当前幻灯片的透明度，默认为 1
opacityStep：透明度向后递减，默认为 0.2
startOffset：开始偏移值，默认为 20 像素
offset：偏移值，默认为 0
scale：缩放值，默认为 1
scaleStep：slide 向后递减缩小，默认为"0.05"
transition：动画过渡时间，默认为"0.6s"
github 地址：https://github.com/hublabs/hubSlider
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
