炫酷动画过渡效果jQuery幻灯片插件

PetitQ 幻灯片/轮播 2018-11-02 1.47K 0 0

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();
```
```
});
```

配置参数:

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

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'});