一款三维堆叠式幻灯片插件-BFW插件库

一款三维堆叠式幻灯片插件

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

使用方法

引入js文件

<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样式

.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')
}
});

配置参数

$('.hub-slider-slides ul').hubSlider({
    selector: $('li'),
    button: {
        next: $('.hub-slider-arrow_next'),
        prev: $('.hub-slider-arrow_prev')
    },
    transition: '0.7s',
    startOffset: 30,
    auto: true,
    time: 2 // secondly
});

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

完整示例代码：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        body { background-color:#333;}
    .container {
      width: 500px;
      margin: 350px auto;
    }
    
    .hub-slider { position: relative; }
    
    .hub-slider ul { list-style: none; }
    
    .hub-slider ul li {
      width: 500px;
      height: 300px;
      background: #DA4453;
      color:#fff;
      line-height:300px;
      text-align:center;
      position: absolute;
      border-radius:5px;
      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: #34BC9D;
      color: #fff;
      font-weight: bold;
    }
    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hubslider.js"></script>
    <script type="text/javascript">
        $(function () {

$('.hub-slider-slides ul').hubSlider({
    selector: $('li'),
    button: {
        next: $('.hub-slider-arrow_next'),
        prev: $('.hub-slider-arrow_prev')
    },
    transition: '0.7s',
    startOffset: 30,
    auto: true,
    time: 2 // secondly
});

        })
    </script>

</head>

<body>

    <div class="container">

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

    </div>

</body>

</html>

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