SlidesJs 3.0是一个支持自适应滑动的jQuery插件，支持移动设备触摸滑动和CSS过渡效果，使用也简单，支持IE7及以上的高级浏览器。
该幻灯片插件除了上面的特色外，还支持循环、自动播放、图片预加载、自动生成分页等常规的滚动插件设置。
插件使用方法：
<!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: 940,
height: 528
});
});
</script>
</head>
<body>
<div id="slides">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
<img src="http://placehold.it/940x528">
</div>
</body>本文要讲的是如何优化在移动设备的使用
由于使用这个插件在移动设备时加载的图片跟PC上的图片一样大，图片会压缩变形，并且图片太大明显浪费用户的流量，影响网页的加载。
同时也有可能移动设备上的图片跟PC上的图片大小不是同一个比例，而该插件是根据设定的长和宽的比例来缩放，不符合我们的需求。
本人修改了这个插件的一些设置，并加入了一些参数。
| 参数 | 默认值 | 描述 |
| resizeImg | false | 自适应图片是否有效：默认为否，若为真，则移动端和PC端需加不同图片 |
| mSize | 640 | 窗口宽度小于这个值的使用移动端图片 |
| mWidth | 640 | 移动端的图片宽度 |
| mHeight | 340 | 移动端的图片高度 |
| pcWidth | 1170 | PC端的图片高度 |
| pcHeight | 340 | PC端的图片高度 |
如果是不需要考虑移动端与PC端使用不同的图片，则插件的使用情况跟原来的插件一样。
如果需要使用移动端与PC端不同图片，则需要加以下代码，图片的图片和高度根据你的情况更改。
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
difImg: true,//必须，其他根据图片尺寸情况更改
mSize: 610,
mWidth: 611,
mHeight: 340,
pcWidth : 1134,
pcHeight : 340
});
});
</script>HTML代码需要在图片上加上data-mobile和data-pc的图片地址，默认可以填mobile的地址。
<div id="slides">
<img src="img/b1.jpg" alt="" data-mobile="img/b1.jpg" data-pc="img/banner1.jpg">
<img src="img/b2.jpg" alt="" data-mobile="img/b2.jpg" data-pc="img/banner2.jpg">
<img src="img/b3.jpg" alt="" data-mobile="img/b3.jpg" data-pc="img/banner3.jpg">
</div>我已经将插件fork并更改上传到我的github了，你可以到这里查看我的代码和演示：
https://github.com/kujian/Slides/tree/SlidesJS-3
如果这个插件对你有用，欢迎Star和Fork，你的支持是我们继续努力的动力。
演示 缩放窗口大小到600以下会发现图片已经变了
