带38种动画过渡效果的炫酷jQuery幻灯片插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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

使用方法

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

<link type="text/css" href="css/skitter.styles.min.css" media="all" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.skitter.min.js"></script>

HTML结构

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

<div class="box_skitter box_skitter_large">
  <ul>
    <li>
      <a href="#cut"><img src="images/001.jpg" class="cut" /></a>
      <div class="label_text"><p>cut</p></div>
    </li>
    <li>
      <a href="#swapBlocks"><img src="images/002.jpg" class="swapBlocks" /></a>
      <div class="label_text"><p>swapBlocks</p></div>
    </li>
    <li>
      <a href="#swapBarsBack"><img src="images/003.jpg" class="swapBarsBack" /></a>
      <div class="label_text"><p>swapBarsBack</p></div>
    </li>
  </ul>
</div>

初始化插件

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

$(document).ready(function() {
  $(".box_skitter_large").skitter();
});

配置参数

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

animateNumberActive：激活的圆点导航的样式。默认值：{backgroundColor:'#cc3333', color:'#fff'}，接收值：array。
```
$('.box_skitter_large').skitter({ animateNumberActive: {backgroundColor:'#000', color:'#ccc'} });
```

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

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

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

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

animation：默认的过渡动画。默认值：null或在<a>中定义，接收值：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。
```
$('.box_skitter_large').skitter({ animation: 'fade' });
```
auto_play：幻灯片是否自动播放。默认值：true，接收值：Boolean。
```
$('.box_skitter_large').skitter({ auto_play: false });
```
controls：是否可以手动暂停/播放幻灯片。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ controls: true });
```
controls_position：控制按钮的位置。默认值：center，接收值：center, leftTop, rightTop, leftBottom, rightBottom。
```
$('.box_skitter_large').skitter({ controls_position: 'rightBottom' });
```
dots：导航的圆点按钮。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ dots: true });
```
easing_defaulteasing类型。：默认值：null，接收值：null, ease type。
```
$('.box_skitter_large').skitter({ easing_default: 'easeOutBack' });
```
enable_navigation_keys：是否可以通过键盘方向键导航。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ enable_navigation_keys: true });
```
focus：Focus slideshow。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ focus: true });
```
focus_position：Position of button focus slideshow。默认值：center，接收值：center, leftTop, rightTop, leftBottom, rightBottom。
```
$('.box_skitter_large').skitter({ focus_position: 'leftTop' });
```
fullscreen：是否使用全屏模式。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ fullscreen: true });
```
hideTools：是否隐藏数字导航和圆点导航。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ hideTools: true });
```

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

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

interval：幻灯片切换的时间间隔。默认值：2500，接收值：integer。
```
$('.box_skitter_large').skitter({ interval: 3000 });
```
label：是否显示标题。默认值：true，接收值：Boolean。
```
$('.box_skitter_large').skitter({ label: false });
```
labelAnimation：标题动画的类型。默认值：slideUp，接收值：slideUp, left, right, fixed。
```
$('.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); }。
```
$('.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); }。
```
$('.box_skitter_large').skitter({ mouseOverButton: function() { $(this).stop().animate({opacity:0.2}, 500); });
```
navigation：是否显示导航。默认值：true，接收值：Boolean。
```
$('.box_skitter_large').skitter({ navigation: false });
```
numbers：是否显示数字导航。默认值：true，接收值：Boolean。
```
$('.box_skitter_large').skitter({ numbers: false });
```
numbers_align：numbers/dots/thumbs的对齐方式。默认值：left，接收值：center, left, right。
```
$('.box_skitter_large').skitter({ numbers_align: 'center' });
```

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

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

preview：是否在原点导航上显示缩略图。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ dots: true, preview: true });
```
progressbar：是否显示进度条。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ progressbar: true });
```
progressbar_css：进度条的CSS样式。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ progressbar_css: { backgroundColor: '#000' } });
```
show_randomly：是否随机显示幻灯片。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ show_randomly: true });
```
stop_over：是否在鼠标经过时停止幻灯片播放。默认值：true，接收值：Boolean。
```
$('.box_skitter_large').skitter({ stop_over: false });
```
theme：幻灯片的主题。默认值：null，接收值：minimalist, round, clean, square。
```
$('.box_skitter_large').skitter({ theme: 'square' });
```
thumbs：导航是否带缩略图。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ thumbs: true });
```
velocity：动画的速度。默认值：1，接收值：0 to 2 (float)。
```
$('.box_skitter_large').skitter({ velocity: 0.5 });
```
width_label：标题的宽度。默认值：null，接收值：css property (300px, auto)。
```
$('.box_skitter_large').skitter({ width_label: '300px' });
```
with_animations：指定动画。默认值：[]，接收值：['paralell', 'glassCube', 'swapBars']。
```
$('.box_skitter_large').skitter({ with_animations: ['paralell', 'glassCube', 'swapBars'] });
```
xml：从XML文件中加载数据。默认值：false，接收值：Boolean。
```
$('.box_skitter_large').skitter({ xml: "xml/slides.xml" });
```