1KB轻量级幻灯片jQuery插件
1KB幻灯片jQuery插件是一个轻量级的简单的幻灯片插件，他很小也很简单，当然现在已经不止1KB了，大概在3KB左右，但是还是很小巧的说。
前言
这个是云落前几天无意中发现的，还不错，很小巧很简单，很合云落胃口，所以就收藏了下来了，使用方法也很简单，和正常的jQuery使用一样
jQuery使用
首先还是那句话，先加载jQuery库，顺便带上自己的jQuery
<script src="//upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script> <script src="responsiveslides.min.js"></script>
然后需要初始化jQuery插件
<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>
还要加点样式辅助的
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
然后就是看看HTML结构是啥样的
<ul class="rslides"> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> </ul>
插件参数
来看看插件都支持哪些参数
$(".rslides").responsiveSlides({
auto: true, // Boolean: 设置是否自动播放, true or false
speed: 500, // Integer: 动画持续时间，单位毫秒
timeout: 4000, // Integer: 图片之间切换的时间，单位毫秒
pager: false, // Boolean: 是否显示页码, true or false
nav: false, // Boolean: 是否显示左右导航箭头（即上翻下翻）, true or false
random: false, // Boolean: 随机幻灯片顺序, true or false
pause: false, // Boolean: 鼠标悬停到幻灯上则暂停, true or false
pauseControls: true, // Boolean: 悬停在控制板上则暂停, true or false
prevText: "Previous", // String: 往前翻按钮的显示文本
nextText: "Next", // String: 往后翻按钮的显示文本
maxwidth: "", // Integer: 幻灯的最大宽度
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: 声明自定义分页导航
namespace: "rslides", // String: 修改默认的容器名称
before: function(){}, // Function: 回调之前的参数
after: function(){} // Function: 回调之后的参数
});