首页 > 代码库 > jQuery幻灯片插件Skippr
jQuery幻灯片插件Skippr
Skippr是一款带左右箭头,索引按钮,滑动切换效果并且轻量、快速的幻灯片
设置
引入jquery.skippr.css、jquery.js、jquery.skippr.js 注意jQuery必须在jquery.skippr.js之前
<head> <link href=http://www.mamicode.com/"css/jquery.skippr.css" rel="stylesheet" type="text/css" >>创建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"。
效果图:
项目演示源码:xxx
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。