html5堆叠游戏制作,jQuery和CSS3超酷3D堆叠式幻灯片插件

hubSlider是一款jQuery和CSS3超酷3D堆叠式幻灯片插件。该幻灯片将各个slide堆叠在一起，利用jquery，CSS3 transforms和transitions来制作上下切换的堆叠幻灯片效果。

安装

可以通过bower来安装该幻灯片。

bower install hubslider

使用方法

使用该幻灯片插件需要在页面中引入jquery，hubslider.js文件。

HTML结构

该幻灯片的基本HTML结构如下：

• Slide 1
• Slide 2
• Slide 3
• Slide 4
• Slide 5

↑

↓

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"。