Skitter jQuery 插件

来源：互联网发布：网络被骗2000报警么编辑：程序博客网时间：2024/06/06 02:08

Skitter绝对算得上是一款漂亮的Jquery幻灯片插件，第一眼就被他的切换效果所吸引。

使用步骤

1、引入JS和css文件

1
2
3
4
5
<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

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

3、html代码的格式为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<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="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>
        <li><a href="#cubeSize"><img src="images/006.jpg" class="cubeSize" /></a>
          <div class="label_text">
            <p>cubeSize</p>
          </div>
        </li>
        <li><a href="#horizontal"><img src="images/007.jpg" class="horizontal" /></a>
          <div class="label_text">
            <p>horizontal</p>
          </div>
        </li>
        <li><a href="#showBars"><img src="images/008.jpg" class="showBars" /></a>
          <div class="label_text">
            <p>showBars</p>
          </div>
        </li>
        <li><a href="#showBarsRandom"><img src="images/009.jpg" class="showBarsRandom" /></a>
          <div class="label_text">
            <p>showBarsRandom</p>
          </div>
        </li>
        <li><a href="#tube"><img src="images/010.jpg" class="tube" /></a>
          <div class="label_text">
            <p>tube</p>
          </div>
        </li>
        <li><a href="#fade"><img src="images/011.jpg" class="fade" /></a>
          <div class="label_text">
            <p>fade</p>
          </div>
        </li>
        <li><a href="#fadeFour"><img src="images/012.jpg" class="fadeFour" /></a>
          <div class="label_text">
            <p>fadeFour</p>
          </div>
        </li>
        <li><a href="#paralell"><img src="images/013.jpg" class="paralell" /></a>
          <div class="label_text">
            <p>paralell</p>
          </div>
        </li>
        <li><a href="#blind"><img src="images/014.jpg" class="blind" /></a>
          <div class="label_text">
            <p>blind</p>
          </div>
        </li>
        <li><a href="#blindHeight"><img src="images/015.jpg" class="blindHeight" /></a>
          <div class="label_text">
            <p>blindHeight</p>
          </div>
        </li>
        <li><a href="#blindWidth"><img src="images/016.jpg" class="blindWidth" /></a>
          <div class="label_text">
            <p>blindWidth</p>
          </div>
        </li>
        <li><a href="#directionTop"><img src="images/017.jpg" class="directionTop" /></a>
          <div class="label_text">
            <p>directionTop</p>
          </div>
        </li>
        <li><a href="#directionBottom"><img src="images/018.jpg" class="directionBottom" /></a>
          <div class="label_text">
            <p>directionBottom</p>
          </div>
        </li>
        <li><a href="#directionRight"><img src="images/019.jpg" class="directionRight" /></a>
          <div class="label_text">
            <p>directionRight</p>
          </div>
        </li>
        <li><a href="#directionLeft"><img src="images/020.jpg" class="directionLeft" /></a>
          <div class="label_text">
            <p>directionLeft</p>
          </div>
        </li>
        <li><a href="#cubeStopRandom"><img src="images/021.jpg" class="cubeStopRandom" /></a>
          <div class="label_text">
            <p>cubeStopRandom</p>
          </div>
        </li>
        <li><a href="#cubeSpread"><img src="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字符串所有的动画请参见下面切换效果nullauto_play是否自动播放幻灯片true或falsetruecontrols是否显示 play/pause选项true或falsefalsecontrols_position按钮控件的位置center, leftTop, rightTop, leftBottom, rightBottomcenterdots导航用点true或falsefalseeasing_default默认缓动null或缓动字符串nullenable_navigation_keys是否启用导航键true或falsefalsefocus: true焦点幻灯片true或falsefalsefocus_position焦点幻灯片按钮的位置center, leftTop, rightTop, leftBottom, rightBottomcenterfullscreen是否设置成全屏模式true或falsefalsehideTools是否隐藏数字按钮和导航true或falsefalseinterval幻灯片切换间隔时间数字2500label是否显示标签true或falsetruemouseOutButton鼠标移出导航按钮的回调函数函数function() { $(this).stop().animate({opacity:0.5}, 200); }mouseOverButton鼠标移到导航按钮上时的回调函数函数function() { $(this).stop().animate({opacity:0.5}, 200); }navigation是否显示导航按钮true或falsetruenumbers是否显示数字按钮true或falsetruenumbers_align按钮数字的对齐方式center, left, rightleftonLoad加载幻灯片调用的函数函数nullpreview是否显示预览图true或falsefalseshow_randomly是否随机切换样式true或falsetruestop_over当鼠标移动到幻灯片上时是否暂停切换true或falsetruethumbsNavigation with thumbstrue或falsefalsevelocity动画速度0-2（float）1width_labellabel的宽度宽度字符串（’300px’）nullwith_animations特定的动画效果集合类似于['paralell', 'glassCube','swapBars']的格式[]xml从制定的xml中加载数据xml文件路径或true, falsefalse

切换效果

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

文章链接： http://www.jq22.com/jquery-info20 转载请务必加上该链接

0 0