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"。

效果图：

项目演示源码下载：http://download.csdn.net/detail/itmyhome/7723757

作者：itmyhome

jQuery幻灯片插件Skippr的更多相关文章

  1. Skippr – 轻量、快速的 jQuery 幻灯片插件

    Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...

  2. SlidesJS - 老牌的响应式 jQuery 幻灯片插件

    SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作 ...

  3. Prezento – 轻量、简单的 jQuery 幻灯片插件

    Prezento 是一个超级简单的 jQuery 幻灯片插件.可以让你网页以新颖的交互方式呈现.另外,Prezento 支持响应式设计,配置项也很灵活,可以根据你需要的效果配置. 您可能感兴趣的相关文 ...

  4. 12款jQuery幻灯片插件和幻灯片特效教程

    jQuery 使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果.滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今 ...

  5. 强大实用的jQuery幻灯片插件Owl Carousel

    演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...

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

    插件简介 lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特 ...

  7. jQuery幻灯片插件Owl Carousel

    简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON ...

  8. jQuery幻灯片插件autoPic

    原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!

  9. jquery幻灯片插件之owl.carousel.js

    官网地址:http://owlcarousel2.github.io/OwlCarousel2/ 这个插件兼容各种浏览器,以及移动端 使用方法: 1.下载文件,解压以后,把dist里面的文件放到项目中 ...

随机推荐

  1. Jenkins master在windows

    Jenkins master在windows上安装 1 Jenkins Jenkins由以前的hudson更名而来.Jenkins的主要功能是监视重复工作的执行,例如软件工程的构建或在cron下设置的 ...

  2. 你知道OneNote的OCR功能吗？office lens为其增大威力，中文也识别

    原文:[原创]你知道OneNote的OCR功能吗?office lens为其增大威力,中文也识别 OneNote提供了强大的从图片中取出文字的功能,大家只要装上了桌面版OneNote(本人用的2013 ...

  3. js调用wcf 的SOA

    jquery 调用wcf 的SOA架构,将三层架构运用到SOA的架构中来 经过前面3天的学习,我想大家应该对SOA的架构有了初步的了解,其实 SOA与三层架构并不冲突,而是三层架构的升级版. 来看下传 ...

  4. js小记 function 的 length 属性

    原文:js小记 function 的 length 属性 [1,2,3]., ,这个略懂js的都知道. 但是  eval.length,RegExp.length,"".toStr ...

  5. Node.js与MongoDB的基本连接示例

    Node.js与MongoDB的基本连接示例 前提 已经安装了node.js和MongoDB,本文使用的node.js是v0.12.0,MongoDB是3.0.0. 初始化数据 启动MongoDB服务 ...

  6. HDU 1385 Minimum Transport Cost 最短路径题解

    本题就是使用Floyd算法求全部路径的最短路径,并且须要保存路径,并且更进一步须要依照字典顺序输出结果. 还是有一定难度的. Floyd有一种非常巧妙的记录数据的方法,大多都是使用这种方法记录数据的. ...

  7. ApacheBench（ab）使用简介

    网站性能压力测试是服务器网站性能调优过程中必不可缺少的一环.只有让服务器处在高压情况下,才能真正体现出软件.硬件等各种设置不当所暴露出的问题. 性能测试工具目前最常见的有以下几种:ab.http_lo ...

  8. JavaScript重载解读

    在JavaScript有一个特殊的数据类型---Function种类,JavaScript每个功能Function的类型,例如可以.由于函数是对象.指针,不会与某个函数绑定. <pre name ...

  9. protobuf-net-data

    protobuf-net http://www.codeproject.com/Articles/642677/Protobuf-net-the-unofficial-manual https://g ...

  10. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...