skitter 插件使用

Skitter 是一个 jQuery 插件，它帮我们把杂乱无序的图片以相当精彩的动画效果进行幻灯片展示（Slideshow）。图片可以自动变换，也可以通过“前一个”，“后一个”进行翻页。

这个插件最大的特色是，它在翻页或滑动时有非常多的动画效果，比如立方体形、管道形等等。它还给用户提供一系列选项进行最大限度的自定义，例如，动画速度，转换间隔，图片文字标签的设置等。

另一个不错的特性是，它可以提醒每一幅幻灯片的动画的类型，这样可以使我们在一个幻灯片展示中使用多个动画效果。

1.<div class="img_Slide box_skitter_large">

<ul>

<li><a href="javascript:;"><img src="images/index_lb_img1.jpg" width="817" height="422" class="cube" /></a></li>

<li><a href="javascript:;"><img src="images/index_lb_img2.jpg" class="cubeRandom" /></a></li>

</ul>

</div>

2.再加一个skitter样式<link href="css/skitter.styles.css" type="text/css" />

3.Skitter的使用 四个插件加一段js代码

<script src="js/jquery-1.6.3.min.js"></script>

<script src="js/jquery.easing.1.3.js"></script>

<script src="js/jquery.skitter.min.js"></script>

<script src="js/jquery.animate-colors-min.js"></script>使他会随着图片的变换也跟这变

Skitter <wbr>jQuery <wbr>插件

4.Js:

{numbers_align:"center",show_randomly: true, navigation: false,(是否有左右方向箭头) dots: true,（滚动点为圆点，若为false时，则是方块的1.2.3） interval: 4000（表示速度，数值越大，速度越小）,fullscreen:true(全屏)，focus: true(焦点在中间加一个小圆焦点，点击会在中间),controls: true（可以控制停止）, }

 

$(document).ready(function() {

$('.box_skitter_large').skitter({

numbers_align: "center",

dots: true,

preview: true,

focus: true,

focus_position: "leftTop",

controls: true,

controls_position: "leftTop",

progressbar: true,

progressbar_css: {

top:'5px',

left:'590px',

height:10,

borderRadius:'2px',

width:200,

backgroundColor:'#000',

opacity:.7

},