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

安装

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

bower install hubslider                  
                

使用方法

使用该幻灯片插件需要在页面中引入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"。

hubSlider.js幻灯片插件的github地址为:https://github.com/hublabs/hubSlider