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. ASP.NET 5 Web 项目

    在Mac OS X Yosemite 10.10.3 中搭建第一个 ASP.NET 5 Web 项目 终于有时间在 Mac 上安装一下 ASP.NET 5,网上有许多教程,但是多数的时间比较早了,版本 ...

  2. 回想一下著名的BigTable论题

    GFS捕捉一些业务场景的分布式文件系统的需求.很自然.此外还有一些与他们一些业务或依赖于文件系统是不那么容易,他们需要一个分布式数据库系统. BigTable那是,Google结构化数据处理的需求而产 ...

  3. Java泛型解析(03)：虚拟机运行泛型代码

    Java泛型解析(03):虚拟机运行泛型代码      Java虚拟机是不存在泛型类型对象的,全部的对象都属于普通类,甚至在泛型实现的早起版本号中,可以将使用泛型的程序编译为在1.0虚拟机上可以执行的 ...

  4. 网上收集的WebBrowser的Cookie操作

    原文:网上收集的WebBrowser的Cookie操作 1.WebBrowser设置Cookie Code highlighting produced by Actipro CodeHighlight ...

  5. zoj 3822 Domination(dp)

    题目链接:zoj 3822 Domination 题目大意:给定一个N∗M的棋盘,每次任选一个位置放置一枚棋子,直到每行每列上都至少有一枚棋子,问放置棋子个数的期望. 解题思路:大白书上概率那一张有一 ...

  6. 在打包程序中自动安装SQL Server数据库 .

    原文:在打包程序中自动安装SQL Server数据库 . 1.创建安装项目“Setup1”安装项目 在“文件”菜单上指向“添加项目”,然后选择“新建项目”. 在“添加新项目”对话框中,选择“项目类型” ...

  7. 【Heritrix基础教程2】Heritrix基本介绍

    1.版本号说明 (1)最新的版本号:3.3.0 (2)最新release版本号:3.2.0 (3)重要历史版本号:1.14.4 3.1.0及之前的版本号:http://sourceforge.net/ ...

  8. Oracle中的二进制、八进制、十进制、十六进制相互转换函数

    原文:Oracle中的二进制.八进制.十进制.十六进制相互转换函数 Oracle中的二进制.八进制.十进制.十六进制相互转换函数   今天在网上看到一篇关于在oracle中对各种进制数进行转换的帖子, ...

  9. .NET到Node.js

    从.NET到Node.js谈前后端分离实践(by vczero)   一.最初的[无分离]实践 11年末的时候,用winForm开发程序,拖拖控件,点点按钮,连接数据库,做一些基本的管理系统:Java ...

  10. Java泛型和集合之泛型介绍

    在声明一个接口和类的时候可以使用尖括号带有一个或者多个参数但是当你在声明属于一个接口或者类的变量的时候或者你在创建一个类实例的时候需要提供他们的具体类型.我们来看下下面这个例子 List<Str ...