Smoothslides是一款响应式的单幅图片带平滑动画效果的jQuery幻灯片插件。该幻灯片中在每一个slide中的图片都可以设置一种动画效果，例如可以缓慢移动，放大等共11种不同的效果。
使用方法
使用这个圆形进度条插件首先要引入jQuery和smoothslides.theme.css和smoothslides-2.1.0.min.js文件。
<link rel="stylesheet" href="css/smoothslides.theme.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="dist/smoothslides-2.1.0.min.js"></script>
HTML结构
该幻灯片的HTML结构使用一个<div>作为包裹容器，为包裹容器添加class smoothslides，然后可以在它里面放置多张你需要的图片。
<div class="smoothslides" id="myslideshow1">
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
</div>
初始化插件
在页面DOM元素加载完毕之后，可以使用下面的方法来初始化该幻灯片插件：
<script type="text/javascript">
$(window).load( function() {
$('#myslideshow1').smoothSlides();
});
</script>
你也可以在同一个页面中初始化多个幻灯片实例，每个实例可以带不同的参数，只需要为每个实例设置一个唯一的ID号。
<script type="text/javascript">
$(window).load( function() {
$('#example-one').smoothSlides();
$('#example-two').smoothSlides();
});
</script>
配置参数
该幻灯片插件有下面一些可用的配置参数。
| 参数 | 描述 | 可用值 | 默认值 |
| effectDuration | 各种动画效果的持续时间，单位毫秒 | 用户指定 | 6000 |
| transitionDuration | 幻灯片切换的时间 | 用户指定 | 500 |
| autoPlay | 指定在页面加载后是否自动播放幻灯片 | 'true' 或 'false' | 'true' |
| effect | 每个幻灯片中图片的动画效果 | 'crossFade' 'zoomOut' zoomIn' 'panUp' 'panDown' 'panLeft' 'panRight' 'diagTopLeftToBottomRight' 'diagTopRightToBottomLeft' 'diagBottomRightToTopLeft' 'diagBottomLeftToTopRight' 注意：你可以选择多个效果，中间使用逗号隔开，例如：'zoomOut,zoomIn' |
随机从可选值中选取一个 |
| effectEasing | 动画效果的CSS easing效果 | 'ease' 'ease-in' 'ease-out' 'ease-in-out' 'linear' | 'ease-in-out' |
| nextText | 向前翻页按钮上的文本 | 用户指定 | ' ►' |
| prevText | 向后翻页按钮上的文本 | 用户指定 | '◄ ' |
| captions | 是否使用图片的alt标签内容来显示图片标题 |
'true' 或 'false' | 'true' |
| navigation | 是否显示前一个和下一个按钮 | 'true' 或 'false' | 'true' |
| pagination | 是否显示分页导航按钮 | 'true' 或 'false' | 'true' |
| matchImageSize | 如果为true则设置一个机遇你的图片尺寸的最大宽度。如果为false则允许宽度比图片大 |
'true' 或 'false' | 'true' |
你可以同时选择多种图片动画效果，例如：
effect: 'zoomIn,zoomOut,panLeft,panRight'
该幻灯片提供了一些默认的CSS样式，但你可以通过编辑smoothslides.theme.css文件来自定义自己的样式。
默认情况下，该幻灯片的宽度和你的图片是一样宽的。你可以通过设置matchImageSize为false来改变这个默认行为。在这种模式中，幻灯片将和它的父容器宽度匹配。但要注意的是，这时图片会被进行缩放。
