Revolution Responsive jQuery Slider滑动幻灯片插件

今天学了Revolution Slider 插件，这是一个很酷的插件，因为它可以简单快捷的设计出一个拥有滑动幻灯片的网页。现在来说一下怎么使用这个插件。

首先要准备的当然是这个插件，可以上这个官方网站购买http://codecanyon.net/user/themepunch?ref=themepunch.

打开文件目录，会看到

 

1、准备文件

<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />

2、HTML主体

我们把整个幻灯片放在一个div里：

<div class="fullwidthbanner-container">
   <div class="fullwidthbanner">...</div>
</div>

3、加入图片&文字

<ul>
 <li data-transition="boxslide" data-slotamount="7">
   <img src="images/slides/image1.jpg">
   <div class="caption sft big_white"  data-x="400" data-y="120" data-speed="700" data-start="1700" data-easing="easeOutBack">飞过来的字幕1</div>
   <div class="caption sfb big_orange"  data-x="400" data-y="142" data-speed="600" data-start="1900" data-easing="easeOutBack"><pre name="code" class="html" style="font-size: 18px; ">飞过来的字幕<span style="font-family: Arial; ">2</div></span>

<div class="caption lfr medium_grey" data-x="510" data-y="210" data-speed="300" data-start="2000">

飞过来的字幕3<span style="font-family: Ar