Skippr是一款带左右箭头,索引按钮,滑动切换效果并且轻量、快速的幻灯片
设置
引入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 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
- });
- });
speed: 幻灯片的过渡时间,默认是500。
navType: 导航元素的形状。"block"或者"bubble",默认是"block"。
arrows:是否显示导航箭头,默认是true,设置为false隐藏箭头。
autoPlay:是否使用幻灯片自动播放功能。默认是false的。设置为true来实现自动播放。
autoPlayDuration:设置的时间以毫秒为单位,自动播放运行,显示每张幻灯片,默认值是5000毫秒。
hidePrevious:是否隐藏第一张幻灯片的箭头,默认是"false"。
效果图: