Skippr是一款带左右箭头,索引button,滑动切换效果而且轻量、高速的幻灯片
设置
引入jquery.skippr.css、jquery.js、jquery.skippr.js 注意jQuery必须在jquery.skippr.js之前
<head>
<link href="css/jquery.skippr.css" rel="stylesheet" type="text/css" >
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="js/jquery.skippr.js" type="text/javascript"></script>
</head>创建DIV元素,div标签内加入background-images样式<div id="container">
<div id="myskipper">
<div style="background-image: url(css/img/test1.jpg)"></div>
<div style="background-image: url(css/img/test2.jpg)"></div>
<div style="background-image: url(css/img/test3.jpg)"></div>
</div>
</div>启动选择目标元素调用skipper方法
$(document).ready(function(){
$("#myskipper").skippr();
}); 选项
$(document).ready(function(){
$("#myskipper").skippr({
transition: 'slide',
speed: 1000,
navType: 'block',
arrows: true,
autoPlay: false,
autoPlayDuration: 5000,
keyboardOnAlways: true,
hidePrevious: false
});
}); transition: 指定幻灯片过渡类型,眼下Skippr支持'fade'或者'slide'这两种方式。speed: 幻灯片的过渡时间,默认是500。
navType: 导航元素的形状。"block"或者"bubble",默认是"block"。
arrows：是否显示导航箭头,默认是true,设置为false隐藏箭头。
autoPlay：是否使用幻灯片自己主动播放功能。
默认是false的。
设置为true来实现自己主动播放。
autoPlayDuration：设置的时间以毫秒为单位,自己主动播放执行,显示每张幻灯片,默认值是5000毫秒。
hidePrevious：是否隐藏第一张幻灯片的箭头,默认是"false"。
效果图：
项目演示源代码下载：http://download.csdn.net/detail/itmyhome/7723757
作者：itmyhome