文档章节

9秒学院:带38种动画过渡效果的炫酷jQuery幻灯片插件

 梁米
发布于 2015/08/24 16:52
字数 1321
阅读 62
收藏 0

简要教程
  SkitterSlideshow是一款效果非常炫酷的jQuery幻灯片插件。该幻灯片插件支持38种不同的幻灯片过渡动画效果,以及两种不同类型的导航按钮,并且它提供了大量的配置参数用于控制幻灯片的显示。

2.jpg

查看演示     下载插件

  使用方法
  使用该幻灯片插件需要引入jQuery,jquery.skitter.min.js,jquery.easing.1.3.js和skitter.styles.min.css文件。

  1. <link type="text/css" href="css/skitter.styles.min.css" media="all" rel="stylesheet" />

  2. <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>

  3. <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

  4. <script type="text/javascript" src="js/jquery.skitter.min.js"></script>               

复制代码


  HTML结构
  该幻灯片的基本HTML结构使用的是无序列表。

  1. <div class="box_skitter box_skitter_large">

  2.   <ul>

  3.     <li>

  4.       <a href="#cut"><img src="images/001.jpg" class="cut" /></a>

  5.       <div class="label_text"><p>cut</p></div>

  6.     </li>

  7.     <li>

  8.       <a href="#swapBlocks"><img src="images/002.jpg" class="swapBlocks" /></a>

  9.       <div class="label_text"><p>swapBlocks</p></div>

  10.     </li>

  11.     <li>

  12.       <a href="#swapBarsBack"><img src="images/003.jpg" class="swapBarsBack" /></a>

  13.       <div class="label_text"><p>swapBarsBack</p></div>

  14.     </li>

  15.   </ul>

  16. </div>            

复制代码


  初始化插件
  在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该幻灯片插件。

  1. $(document).ready(function() {

  2.   $(".box_skitter_large").skitter();

  3. });     

复制代码


  配置参数

  该幻灯片插件的接收配置参数如下:

  animateNumberActive:激活的圆点导航的样式。默认值:{backgroundColor:'#cc3333', color:'#fff'},接收值:array。

  1. $('.box_skitter_large').skitter({ animateNumberActive: {backgroundColor:'#000', color:'#ccc'} });

复制代码


  animateNumberOut:默认值:{backgroundColor:'#333', color:'#fff'},接收值:array。

  1. $('.box_skitter_large').skitter({ animateNumberOut: {backgroundColor:'#000', color:'#ccc'} });

复制代码


  animateNumberOver:默认值:{backgroundColor:'#000', color:'#fff'},接收值:array。

  1. $('.box_skitter_large').skitter({ animateNumberOut: {backgroundColor:'#000', color:'#ccc'} });


复制代码


  animation:默认的过渡动画。默认值:null或在中定义,接收值:cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, random, randomSmart。

  1. $('.box_skitter_large').skitter({ animation: 'fade' });


复制代码


  auto_play:幻灯片是否自动播放。默认值:true,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ auto_play: false });


复制代码


  controls:是否可以手动暂停/播放幻灯片。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ controls: true });

复制代码


  controls_position:控制按钮的位置。默认值:center,接收值:center, leftTop, rightTop, leftBottom, rightBottom。

  1. $('.box_skitter_large').skitter({ controls_position: 'rightBottom' });

复制代码


  dots:导航的圆点按钮。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ dots: true });

复制代码


  easing_defaulteasing类型。:默认值:null,接收值:null, ease type。

  1. $('.box_skitter_large').skitter({ easing_default: 'easeOutBack' });

复制代码


  enable_navigation_keys:是否可以通过键盘方向键导航。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ enable_navigation_keys: true });


复制代码


  focus:Focus slideshow。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ focus: true });

复制代码


  focus_position:Position of button focus slideshow。默认值:center,接收值:center, leftTop, rightTop, leftBottom, rightBottom。

  1. $('.box_skitter_large').skitter({ focus_position: 'leftTop' });

复制代码


  fullscreen:是否使用全屏模式。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ fullscreen: true });

复制代码


  hideTools:是否隐藏数字导航和圆点导航。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ hideTools: true });

复制代码


  imageSwitched:切换图片的调用函数。默认值:null,接收值:function。

  1. $('.box_skitter_large').skitter({ imageSwitched: funtion( image_i, self ) { console.log( image_i); } });

复制代码


  interval:幻灯片切换的时间间隔。默认值:2500,接收值:integer。

  1. $('.box_skitter_large').skitter({ interval: 3000 });

复制代码


  label:是否显示标题。默认值:true,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ label: false });

复制代码


  labelAnimation:标题动画的类型。默认值:slideUp,接收值:slideUp, left, right, fixed。

  1. $('.box_skitter_large').skitter({ labelAnimation: 'left' });

复制代码


  mouseOutButton:Function call to go out the navigation buttons。默认值:function() { $(this).stop().animate({opacity:0.5}, 200); },接收值:function() { $(this).stop().animate({opacity:0.2}, 500); }。

  1. $('.box_skitter_large').skitter({ mouseOutButton: function() { $(this).stop().animate({opacity:0.2}, 500); });

复制代码


  mouseOverButton:Function call to go over the navigation buttons。默认值:function() { $(this).stop().animate({opacity:0.5}, 200); },接收值:function() { $(this).stop().animate({opacity:0.2}, 500); }。

  1. $('.box_skitter_large').skitter({ mouseOverButton: function() { $(this).stop().animate({opacity:0.2}, 500); });

复制代码


  navigation:是否显示导航。默认值:true,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ navigation: false });

复制代码


  numbers:是否显示数字导航。默认值:true,接收值:Boolean

  1. $('.box_skitter_large').skitter({ numbers: false });

复制代码


  numbers_align:numbers/dots/thumbs的对齐方式。默认值:left,接收值:center, left, right。

  1. $('.box_skitter_large').skitter({ numbers_align: 'center' });

复制代码


  onLoad:回调函数。默认值:null,接收值:null, function。

  1. $('.box_skitter_large').skitter({ onLoad: function(self) { console.log(self.settings.animation); } });

复制代码


  preview:是否在原点导航上显示缩略图。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ dots: true, preview: true });

复制代码


  progressbar:是否显示进度条。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ progressbar: true });

复制代码


  progressbar_css:进度条的CSS样式。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ progressbar_css: { backgroundColor: '#000' } });

复制代码


  show_randomly:是否随机显示幻灯片。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ show_randomly: true });

复制代码


  stop_over:是否在鼠标经过时停止幻灯片播放。默认值:true,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ stop_over: false });

复制代码


  theme:幻灯片的主题。默认值:null,接收值:minimalist, round, clean, square。

  1. $('.box_skitter_large').skitter({ theme: 'square' });

复制代码


  thumbs:导航是否带缩略图。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ thumbs: true });

复制代码


  velocity:动画的速度。默认值:1,接收值:0 to 2 (float)。

  1. $('.box_skitter_large').skitter({ velocity: 0.5 });

复制代码


  width_label:标题的宽度。默认值:null,接收值:css property (300px, auto)。

  1. $('.box_skitter_large').skitter({ width_label: '300px' });

复制代码


  with_animations:指定动画。默认值:[],接收值:['paralell', 'glassCube', 'swapBars']。

  1. $('.box_skitter_large').skitter({ with_animations: ['paralell', 'glassCube', 'swapBars'] });

复制代码


  xml:从XML文件中加载数据。默认值:false,接收值:Boolean。

  1. $('.box_skitter_large').skitter({ xml: "xml/slides.xml" });

复制代码

© 著作权归作者所有

粉丝 0
博文 41
码字总数 41320
作品 0
朝阳
私信 提问
10 个旨在美化网站的 HTML5 滑块设计

现在,网站变得更优雅生动,引入了大量的动画和活动的内容——这得益于商业设计的创新。几年前的网页羞涩无趣,其上面的内容静止而乏味。因为滑块的使用这些状况已然改变。现代风格的设计模式...

oschina
2013/09/05
5.5K
10
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
61
0
lightslider-支持移动触摸的轻量级jQuery幻灯片插件

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

哈你真皮
2018/11/15
0
0
39 个超实用 jQuery 实例应用特效

1.Contextual Slideout:上下文滑动特效 2.Revealing Photo Slider:图片幻灯片特效 3.Fancy Box:魔幻盒 4.Scrollable:滚动特效 5.Flip:翻转特效,实现4个方向旋转 6.Smart tooltips:智能...

MrMign
2012/09/12
27.6K
6
jQuery幻灯片skitter-slider插件学习总结

@(关键词)[skitter|jquery|网页幻灯片|slider] Skitter 是一个非常酷炫的jQuery网页幻灯片插件,支持非常多种酷炫幻灯片切换方式,下载前往官网,另有参考文档 下面简单介绍它的几个属性 mous...

吕亚辉
2015/01/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
5
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
6
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
昨天
6
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
7
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部