jQuery Skitter幻灯片插件

    Skitter幻灯片插件是一款基于jQuery的非常强大的幻灯片js插件，强大的地方主要表现在它支持三十多种图片切换效果，例如cube、cubeRandom，您可以点击文章末尾的预览按钮，感受一下。强大的第二个方面是，它竟然一直兼容到IE6浏览器。
    图片载入时，会显示加载图片，左右按钮无线轮播和标题自然也是支持的。还支持从xml中读取图片等等，参数也非常丰富。您可以自己下载下来研究。

1、引入JS和css文件

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

2、HTML代码结构

<div class="box_skitter box_skitter_large" style="margin:0;padding:0">
  <ul>
    <li><a href="#cube"><img src="images/001.jpg" class="cube" /></a>
      <div class="label_text">
        <p>cube</p>
      </div>
    </li>
    <li><a href="#cubeRandom"><img src="images/002.jpg" class="cubeRandom" /></a>
      <div class="label_text">
        <p>cubeRandom</p>
      </div>
    </li>
    <li><a href="#block"><img src="images/003.jpg" class="block" /></a>
      <div class="label_text">
        <p>block</p>
      </div>
    </li>
    <li><a href="#cubeStop"><img src="images/004.jpg" class="cubeStop" /></a>
      <div class="label_text">
        <p>cubeStop</p>
      </div>
    </li>
    <li><a href="#cubeHide"><img src="images/005.jpg" class="cubeHide" /></a>
      <div class="label_text">
        <p>cubeHide</p>
      </div>
    </li>
  </ul>
</div>

3、添加初始化JS

$('.box_skitter_large').skitter({});

4、配置参数：

参数名	参数说明	可选值	默认值
animateNumberActive	数字按钮激活的样式	字符串键值对	{backgroundColor:’#cc3333′, color:’#fff’}
animateNumberOut	鼠标移出时按钮样式	字符串键值对	{backgroundColor:’#333′, color:’#fff’}
animateNumberOver	鼠标移到按钮上时的样式	字符串键值对	{backgroundColor:’#000′, color:’#fff’}
animation	字符串	所有的动画请参见下面切换效果	null
auto_play	是否自动播放幻灯片	true或false	true
controls	是否显示 play/pause选项	true或false	false
controls_position	按钮控件的位置	center, leftTop, rightTop, leftBottom, rightBottom	center
dots	导航用点	true或false	false
easing_default	默认缓动	null或缓动字符串	null
enable_navigation_keys	是否启用导航键	true或false	false
focus: true	焦点幻灯片	true或false	false
focus_position	焦点幻灯片按钮的位置	center, leftTop, rightTop, leftBottom, rightBottom	center
fullscreen	是否设置成全屏模式	true或false	false
hideTools	是否隐藏数字按钮和导航	true或false	false
interval	幻灯片切换间隔时间	数字	2500
label	是否显示标签	true或false	true
mouseOutButton	鼠标移出导航按钮的回调函数	函数	function() { $(this).stop().animate({opacity:0.5}, 200); }
mouseOverButton	鼠标移到导航按钮上时的回调函数	函数	function() { $(this).stop().animate({opacity:0.5}, 200); }
navigation	是否显示导航按钮	true或false	true
numbers	是否显示数字按钮	true或false	true
numbers_align	按钮数字的对齐方式	center, left, right	left
onLoad	加载幻灯片调用的函数	函数	null
preview	是否显示预览图	true或false	false
show_randomly	是否随机切换样式	true或false	true
stop_over	当鼠标移动到幻灯片上时是否暂停切换	true或false	true
thumbs	Navigation with thumbs	true或false	false
velocity	动画速度	0-2（float）	1
width_label	label的宽度	宽度字符串（’300px’）	null
with_animations	特定的动画效果集合	类似于['paralell', 'glassCube','swapBars']的格式	[]
xml	从制定的xml中加载数据	xml文件路径或true, false	false

5、下面是切换效果（参数animation的值） 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