制作响应式分层幻灯片

分类：代码日期：2015-06-25

制作响应式分层幻灯片

简介

该响应式分层幻灯片来自 Simbyone，每张幻灯片里可以有多个元素（文字、图片等），并且可以设置不同的动画效果。整个幻灯片只需要一个 JavaScript 文件就可以工作，当然，是说除去 jquery 等必须依赖的文件外，你可以不需要任何样式，所有的动画都是通过 JavaScript 创建并插入到元素中的。

浏览器兼容


IE9+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

IE 系列中，IE10+ 效果正常，IE9 中无动画效果，更低的版本不推荐使用。

使用方法

1、引入文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui-1.10.4.min.js"></script>
<script src="js/responsive-layered-slider.js"></script>

2、HTML

<div class="sim-slider" data-width="2550" data-height="1240" data-animation="250" 
data-current="true" data-progress="true">
    <div class="sim-slider-inner"></div>
</div>

这是最基本的 HTML 结构，用作幻灯片的容器，并且指定了容器的最大宽度/高度、动画时间、显示指示器和进度条。接下来我们再创建幻灯片：

<div class="sim-slider-slide">
    <div class="sim-slider-layer" data-effect="fadeInDown" data-width="1052" data-height="174" 
data-left="751" data-top="50">
        <img src="img/layer_0025.png" />
    </div>
    <div class="sim-slider-layer" data-effect="fadeInLeft" data-width="694" data-height="841" 
data-left="54" data-top="277">
        <img src="img/layer_0027.jpg" />
    </div>
    <div class="sim-slider-layer" data-effect="fadeInUp" data-width="1019" data-height="848" 
data-left="770" data-top="277">
        <img src="img/layer_0026.jpg" />
    </div>
    <div class="sim-slider-layer" data-effect="fadeInRight" data-width="694" data-height="841" 
data-left="1811" data-top="277">
        <img src="img/layer_0028.jpg" />
    </div>
</div>

每张幻灯片的子元素都可以分别设置动画效果，动画效果共有 18 种，你可以任意组合：