[代码样式]制作响应式分层幻灯片

简介

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

浏览器兼容

IE9+ ✔	Chrome ✔	Firefox ✔	Opera ✔	Safari ✔

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

使用方法

1、引入文件

<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery-ui-1.10.4.min.js"></script>
<script src="https://www.dowebok.com/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="https://www.dowebok.com/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="https://www.dowebok.com/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="https://www.dowebok.com/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="https://www.dowebok.com/img/layer_0028.jpg" />
</div>
</div>

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

• bounceIn
• fadeIn
• rollIn
• fadeInDown
• fadeInDownBig
• fadeInUp
• fadeInUpBig
• fadeInLeft
• fadeInLeftBig
• fadeInRight
• fadeInRightBig
• flipInX
• flipInY
• zoomIn
• zoomInDown
• zoomInUp
• zoomInLeft
• zoomInRight

HTML 写好后，幻灯片就可以工作了。

Simbyone 提供了更为详细的教程，想继续了解请点击这里。

百度网盘" name="制作响应式分层幻灯片" pass="" code=""]