简介
SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件。支持键盘，触摸，css3转换。
使用方法
引入文件
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.slides.min.js"></script>
html文件
<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>
API介绍
1.设置轮播的宽高（默认值都为 auto）
$("#slides").slidesjs({
width: 700,
height: 393
});
2.设置从那张开始（默认值为 1）
$("#slides").slidesjs({
start: 3 //这里注意数值从1开始，不是0；默认值0
});
3.设置上下切换按钮
可以自定样式：
<a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a>
<a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a>
$("#slides").slidesjs({
navigation: {
active: true, //显示或隐藏前一张后一张切换按钮；默认值为true,
effect: "slide" //设置切换的方式，slide:平滑，fade:渐显；默认值slide
}
});
4.设置分页切换
可以自定样式：
<ul class="slidesjs-pagination">
<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="active">1</a></li>
<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1">2</a></li>
<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2">3</a></li>
<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3">4</a></li>
</ul>
$("#slides").slidesjs({
pagination: {
active: true, //显示或隐藏 分页；默认值true
effect: "slide" //这里可以设置切换方式，跟上下页切换一样，但是跟上下页不冲突；默认值slide
}
});
5.自动播放
可以自定样式：
<a class="slidesjs-play slidesjs-navigation slidesjs-playing" href="#" title="Play" style="display: none;">Play</a>
<a class="slidesjs-stop slidesjs-navigation" href="#" title="Stop" style="">Stop</a>
</pre>
<pre class="brush:js">
$("#slides").slidesjs({
play: {
active: true, //开始自动播放功能；默认值true
effect: "slide", //切换方式，跟上面两个切换方式不冲突；默认值slide
interval: 5000, //在每一个幻灯片上花费的时间；默认值5000
auto: false, //开始自动播放；默认值false
swap: true, //显示或隐藏 自动播放和停止按钮；默认值true
pauseOnHover: false, //鼠标移入是否暂停；默认值false
restartDelay: 2500 //重启延迟；默认值2500
}
});
6.效果配置
$("#slides").slidesjs({
effect: {
slide: {
speed: 200 //切换花费的时间；默认值200
},
fade: {
speed: 300, //切换花费的时间；默认值300
crossfade: true //交叉切换，设置为false,会看到背景色；默认值true
}
}
});
7.回调函数
$("#slides").slidesjs({
callback: {
loaded: function(number) {
// 幻灯片载入完成时
},
start: function(number) {
// 切换开始时
},
complete: function(number) {
// 切换结束时
}
}
});