基于jquery的幻灯片插件

您可以点击这里查看示例

这是一张所有值都是默认值的截图

下面是一些基本参数

| 属性列表 | 说明 | 默认值 |
| --- | --- | --- | --- | | width | 幻灯片宽度 | 900 |
| height | 幻灯片高度 | 411 |
| postWidth | 第一帧的宽度 | 658 |
| postHeight | 第一帧的高度 | 411 |
| scale | 每一帧的缩放比例 | 0.8 |
| speed | 幻灯片跳转的速度 | 500 |
| verticalAlign | 布局方式（top:上、middle:中、bottom:下） | middle |
| autoPlay | 是否自动播放 | false |
| delay | 幻灯片自动播放的间隔时间 | 1000 |

使用方法

下载插件，lib文件中的css和js

使用方法是很简单的，首先引入需要的文件

<link rel="stylesheet" href="css/jquery.carousel.css"/> <script src="js/jquery-2.2.3.min.js"></script> <script src="js/jquery.carousel.js"></script>

然后编写HTML文件，创建一个div，类名为carousel content-main，在div里面创建一个列表ul，类名为list，ul标签里面放入li标签，li标签里面放入img，如下所示：

<div id="test1" class="carousel content-main"> <ul class="list"> <li><img src="img/photo_1.jpg"/></li> <li><img src="img/photo_2.jpg"/></li> <li><img src="img/photo_3.jpg"/></li> <li><img src="img/photo_4.jpg"/></li> <li><img src="img/photo_5.jpg"/></li> </ul> </div>

然后在js里面初始化幻灯片就可以了，方法如下：

Carousel.init($(".carousel"));

这样一个幻灯片就完成了，因为demo中的图片大小和默认的参数是一样的，所以这里就没有设置。

为了安全起见这里的四个参数一定要设置一下，分别是幻灯片的高、宽，第一帧也就是第一张图片的高、宽。设置方法如下：

$(".carousel").attr("data-setting",'{ "width":900,"height":411,"postWidth":658,"postHeight":658}')

这里是在js中设置的，当然你也可以在div标签中设置，方法如下：

<div class="carousel content-main" data-setting = '{ "width":900,"height":411,"postWidth":658,"postHeight":658}'> ... </div>

注意设置的属性方式一定要是JSON数据，即所有的属性(除数字外)都要加上双引号。

如果一张页面中要设置多个幻灯片的话，只要分别设置每个div的参数就可以了，只用初始化一次。