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来改变这个默认行为。在这种模式中，幻灯片将和它的父容器宽度匹配。但要注意的是，这时图片会被进行缩放。