splayer使用教程（酷毙了的幻灯片插件layerslider5之1）

首先国外现在用的较多的2个幻灯片插件：Revolution_Slider和layerslider，都有WordPress插件可以直接安装在WordPress上使用，不过是收费的11美刀，WordPress插件需要18美刀。

ps：如果你需要，联系我，你懂得。

版本5和4有很多的区别，如果有出入，请检查自己的版本。

layerslider也差不多。不过和第一个幻灯片组件原理基本上是一样的。

请看效果：

一、先说说其功能：

• 响应式

• 支持移动设备触摸功能

• 2D、3d的支持

• 支持视差效果

• 支持自定义图片

• 无限层支持

• 支持水印

• 13种皮肤，换可以自定义

  好多没有用的东东，懒得说，例如支持视频、缩略图导航等。

二、设计理念：

1. 一张大的图片作为背景，英文的说法是一张幻灯片。

2. 在这个背景幻灯片上分了好多层的概念，理论上是无限，如果你的网站能跑起来，每一个层可以是图片、文字、视频、音乐等。

3. 每一个层可以自己定义进入场的效果，但是如果定义位置呢？

4. 以幻灯片的左上角为基准，而不是div的左上角，大家一定要搞清楚。这样当层设置了50% 50%的时候，显而易见的是在幻灯片的中央。

三、需要第三方支持：

1. jquery

2. GreenSock 先进的网络动画库，以建立漂亮炫目的过渡效果

四、用法：

1. 引入需要的js和css文件：

2. 初始化js：

   

3、书写html文件：

• 最外层用<div id="layerslider"style="width: 1280px; height: 720px; margin: 0 auto;">包裹

• 然后用<div class="ls-slide">层来放置背景幻灯片

• 然后在用class="ls-bg" 放置背景

• 用class="ls-l"放置各种层，包括文字、图片以及视频等。

• 各种效果放置在属性后面。

基本上就搞定了，但是我觉得大家肯定觉得我不靠谱，要么就是那里抄的文章，真实窦娥冤呀，我尽努力来讲清楚，但是，它有些小复杂。思前想后这只是一个前站，下一个录制一个视频来说一声吧。

请等待视频，好多的参数在视频里讲。