Smoothslides – 可平移的jQuery幻灯片插件
简介
Smoothslides 是一款基于 jQuery 的响应式幻灯片插件，它与其他幻灯片最大的不同之处是幻灯片内的图片可移动，并且可设置移动的方向（左/右/左上/右下等等），使幻灯片更加特别、有趣。
浏览器兼容
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE10+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
Smoothslides 平移的动画效果是通过 CSS3 transition 和 translateX/translateY 实现的，所以 IE 系列只有 IE10+ 支持，但在 IE7 – IE9 中，仍可正常工作，只是没有平移的动画效果。
使用方法
1、引入文件
<link rel="stylesheet" href="css/smoothslides.theme.css"> <script src="js/jquery.min.js"></script> <script src="js/smoothslides-2.1.0.min.js"></script>
2、HTML
<div class="smoothslides" id="dowebok"> <img src="images/1.jpg" alt="叶子"> <img src="images/2.jpg" alt="山脉"> <img src="images/3.jpg" alt="树"> <img src="images/4.jpg" alt="天空"> </div>
3、JavaScript
$(window).load(function(){
$('#dowebok').smoothSlides();
});
配置
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| effectDuration | 整数 | 6000 | 平移动画持续时间，单位为毫秒 |
| transitionDuration | 整数 | 500 | 幻灯片切换间隔，单位为毫秒 |
| autoPlay | 布尔值 | true | 自动播放 |
| effect | 字符串 | true | 平移效果，为空则随机 |
| effectEasing | 字符串 | ease-in-out | 动画方式 |
| nextText | 字符串 | ► | 下一个按钮的文本 |
| prevText | 字符串 | ◄ | 上一个按钮的文本 |
| captions | 布尔值 | true | 显示标题 |
| navigation | 布尔值 | true | 显示导航 |
| pagination | 布尔值 | true | 显示分页 |
| matchImageSize | 布尔值 | true | 放大图片，当图片尺寸小于容器尺寸时 |
