绝对炫的幻灯片插件-SKITTER

绝对炫的幻灯片插件-SKITTER

所属分类：媒体-幻灯片和轮播图,图片展示,滑块和旋转

Includes

• code
• source

1. // Styles
2. <link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
3. // Scripts
4. <script src="js/jquery-1.5.2.min.js"></script>
5. <script src="js/jquery.skitter.min.js"></script>
6. <script src="js/jquery.easing.1.3.js"></script>
7. <script src="js/jquery.animate-colors-min.js"></script>

Javascript

• code
• source

1. $(function(){
2. $('.box_skitter_large').skitter();
3. });

HTML

• code
• source

1. <div class="box_skitter box_skitter_large">
2. <ul>
3. <li>
4. <a href="http://thiagosf.net"><img src="data:images/01.jpg" class="block" /></a>
5. <div class="label_text">
6. <p>Label</p>
7. </div>
8. </li>
9. <li>
10. <a href="http://cakephp.org"><img src="data:images/02.jpg" class="cube" /></a>
11. <div class="label_text">
12. <p>Label</p>
13. </div>
14. </li>
15. <li>
16. <a href="http://jquery.com"><img src="data:images/03.jpg" class="default" /></a>
17. <div class="label_text">
18. <p>Label</p>
19. </div>
20. </li>
21. </ul>
22. </div>

XML

• code
• source

1. <?xml version="1.0" encoding="utf-8"?>
2. <skitter>
3. <slide>
4. <link>#directionTop</link>
5. <image type="directionTop">images/001.jpg</image>
6. <label><![CDATA[<p>directionTop</p>]]></label>
7. </slide>
8. <slide>
9. <link>#cubeSize</link>
10. <image type="cubeSize">images/002.jpg</image>
11. <label><![CDATA[<p>cubeSize</p>]]></label>
12. </slide>
13. <slide>
14. <link>#paralell</link>
15. <image type="paralell">images/003.jpg</image>
16. <label><![CDATA[<p>paralell</p>]]></label>
17. </slide>
18. </skitter>

Extend

Options

option	description	default	example
velocity	Velocity of animation	1	$('.box_skitter_large').skitter({velocity: 2});
interval	Interval between transitions	2500	$('.box_skitter_large').skitter({interval: 3000});
animation	Default animation	null or defined in <a> class	$('.box_skitter_large').skitter({animation: 'fade'});
numbers	Numbers display	true	$('.box_skitter_large').skitter({numbers: false});
navigation	Navigation display	true	$('.box_skitter_large').skitter({navigation: false});
label	Label display	true	$('.box_skitter_large').skitter({label: false});
easing_default	Easing default	null	$('.box_skitter_large').skitter({easing_default: 'easeOutBack'});
animateNumberOut	Animation/style number/dot	{backgroundColor:'#333', color:'#fff'}	$('.box_skitter_large').skitter({animateNumberOut: {backgroundColor:'#000', color:'#ccc'}});
animateNumberOver	Animation/style hover number/dot	{backgroundColor:'#000', color:'#fff'}	$('.box_skitter_large').skitter({animateNumberOver: {backgroundColor:'#000', color:'#ccc'}});
animateNumberActive	Animation/style active number/dot	{backgroundColor:'#cc3333', color:'#fff'}	$('.box_skitter_large').skitter({animateNumberActive: {backgroundColor:'#000', color:'#ccc'}});
thumbs	Navigation with thumbs	false	$('.box_skitter_large').skitter({thumbs: true});
hideTools	Hide numbers and navigation	false	$('.box_skitter_large').skitter({hideTools: true});
fullscreen	Fullscreen mode	false	$('.box_skitter_large').skitter({fullscreen: true});
xml	Loading data from XML file	false	$('.box_skitter_large').skitter({xml: "xml/slides.xml"});
dots	Navigation with dots	false	$('.box_skitter_large').skitter({dots: true});
width_label	Width label	null	$('.box_skitter_large').skitter({width_label: '300px'});
show_randomly	Randomly sliders	false	$('.box_skitter_large').skitter({show_randomly: true});
onLoad	Callback	null	$('.box_skitter_large').skitter({onLoad: function() { console.log('start!') } });
numbers_align	Alignment of numbers/dots/thumbs	left	$('.box_skitter_large').skitter({numbers_align: 'center'});
preview	Preview with dots	false	$('.box_skitter_large').skitter({dots: true, preview: true});
focus	Focus slideshow	false	$('.box_skitter_large').skitter({focus: true});
focus_position	Position of button focus slideshow	center	$('.box_skitter_large').skitter({focus_position: 'leftTop'});
controls	Option play/pause manually	false	$('.box_skitter_large').skitter({controls: true});
controls_position	Position of button controls	center	$('.box_skitter_large').skitter({controls_position: 'rightBottom'});

使用步骤

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、添加初始化JS

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

3、html代码的格式为

<div id="content" style="margin:0;padding:0">
  <div class="border_box" style="margin:0;padding:0">
    <div class="box_skitter box_skitter_large" style="margin:0;padding:0">
      <ul>
        <li><a href="#cube"><img src="data:images/001.jpg" class="cube" /></a>
          <div class="label_text">
            <p>cube</p>
          </div>
        </li>
        <li><a href="#cubeRandom"><img src="data:images/002.jpg" class="cubeRandom" /></a>
          <div class="label_text">
            <p>cubeRandom</p>
          </div>
        </li>
        <li><a href="#block"><img src="data:images/003.jpg" class="block" /></a>
          <div class="label_text">
            <p>block</p>
          </div>
        </li>
        <li><a href="#cubeStop"><img src="data:images/004.jpg" class="cubeStop" /></a>
          <div class="label_text">
            <p>cubeStop</p>
          </div>
        </li>
        <li><a href="#cubeHide"><img src="data:images/005.jpg" class="cubeHide" /></a>
          <div class="label_text">
            <p>cubeHide</p>
          </div>
        </li>
        <li><a href="#cubeSize"><img src="data:images/006.jpg" class="cubeSize" /></a>
          <div class="label_text">
            <p>cubeSize</p>
          </div>
        </li>
        <li><a href="#horizontal"><img src="data:images/007.jpg" class="horizontal" /></a>
          <div class="label_text">
            <p>horizontal</p>
          </div>
        </li>
        <li><a href="#showBars"><img src="data:images/008.jpg" class="showBars" /></a>
          <div class="label_text">
            <p>showBars</p>
          </div>
        </li>
        <li><a href="#showBarsRandom"><img src="data:images/009.jpg" class="showBarsRandom" /></a>
          <div class="label_text">
            <p>showBarsRandom</p>
          </div>
        </li>
        <li><a href="#tube"><img src="data:images/010.jpg" class="tube" /></a>
          <div class="label_text">
            <p>tube</p>
          </div>
        </li>
        <li><a href="#fade"><img src="data:images/011.jpg" class="fade" /></a>
          <div class="label_text">
            <p>fade</p>
          </div>
        </li>
        <li><a href="#fadeFour"><img src="data:images/012.jpg" class="fadeFour" /></a>
          <div class="label_text">
            <p>fadeFour</p>
          </div>
        </li>
        <li><a href="#paralell"><img src="data:images/013.jpg" class="paralell" /></a>
          <div class="label_text">
            <p>paralell</p>
          </div>
        </li>
        <li><a href="#blind"><img src="data:images/014.jpg" class="blind" /></a>
          <div class="label_text">
            <p>blind</p>
          </div>
        </li>
        <li><a href="#blindHeight"><img src="data:images/015.jpg" class="blindHeight" /></a>
          <div class="label_text">
            <p>blindHeight</p>
          </div>
        </li>
        <li><a href="#blindWidth"><img src="data:images/016.jpg" class="blindWidth" /></a>
          <div class="label_text">
            <p>blindWidth</p>
          </div>
        </li>
        <li><a href="#directionTop"><img src="data:images/017.jpg" class="directionTop" /></a>
          <div class="label_text">
            <p>directionTop</p>
          </div>
        </li>
        <li><a href="#directionBottom"><img src="data:images/018.jpg" class="directionBottom" /></a>
          <div class="label_text">
            <p>directionBottom</p>
          </div>
        </li>
        <li><a href="#directionRight"><img src="data:images/019.jpg" class="directionRight" /></a>
          <div class="label_text">
            <p>directionRight</p>
          </div>
        </li>
        <li><a href="#directionLeft"><img src="data:images/020.jpg" class="directionLeft" /></a>
          <div class="label_text">
            <p>directionLeft</p>
          </div>
        </li>
        <li><a href="#cubeStopRandom"><img src="data:images/021.jpg" class="cubeStopRandom" /></a>
          <div class="label_text">
            <p>cubeStopRandom</p>
          </div>
        </li>
        <li><a href="#cubeSpread"><img src="data:images/022.jpg" class="cubeSpread" /></a>
          <div class="label_text">
            <p>cubeSpread</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

参数配置

参数名	参数说明	可选值	默认值
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

切换效果

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