jQuery幻灯片插件Skippr

Posted yangykaifa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery幻灯片插件Skippr相关的知识,希望对你有一定的参考价值。

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



以上是关于jQuery幻灯片插件Skippr的主要内容,如果未能解决你的问题,请参考以下文章

基于jQuery幻灯片插件Slippry

Css+jQuery幻灯片的使用教程

jQuery幻灯片插件pbTouchSlider

创建第一个 jQuery 幻灯片插件,从 Javascript 转换

jQuery幻灯片播放器插件

lightslider-支持移动触摸的轻量级jQuery幻灯片插件