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

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

查看演示     下载插件

　　使用方法
　　使用该幻灯片插件需要引入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'} });
   

2. 
   

复制代码

　　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' });
   

2. 
   

复制代码

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

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

2. 
   

复制代码

　　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 });
   

2. 
   

复制代码

　　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" });

复制代码

转载于:https://my.oschina.net/u/2410459/blog/496469