jQuery幻灯片插件Skippr详解编程语言

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元素,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”。


效果图:

jQuery幻灯片插件Skippr详解编程语言

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/14568.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论