基于Animate.css的jQuery全屏幻灯片插件

crosscover是一款基于animate.css的jQuery全屏幻灯片插件。该幻灯片可以使图片无限循环轮播，可以使用animate.css的所有效果来制作图片进入和离开的动画效果，可以暂停自动播放等，并且使用非常简单。

使用方法

使用该幻灯片插件需要引入下面的一些依赖文件。

<!-- animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
<!-- crosscover.css -->
<link rel="stylesheet" href="./dist/css/crosscover.min.css">
<!-- jQuery -->
<script src="jquery/1.7.0/jquery.min.js"></script>
<!-- crosscover.js -->
<script src="./dist/js/crosscover.min.js"></script>                
              

HTML结构

该幻灯片的基本HTML结构如下：

<div class="crosscover">
  <div class="crosscover-overlay">
    <div class="crosscover-island">
      <h1 class="crosscover-title">...</h1>
      <h2 class="crosscover-description">...</h2>
    </div>
  </div>

  <ul class="crosscover-list">
    <li><img src="./images/01.jpg" alt="image01"/></li>
    <li><img src="./images/02.jpg" alt="image02"/></li>
    <li><img src="./images/03.jpg" alt="image03"/></li>
    <li><img src="./images/04.jpg" alt="image04"/></li>
    <li><img src="./images/05.jpg" alt="image05"/></li>
  </ul>
</div>               
              

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该幻灯片插件。

$(".crosscover").crosscover({
    animateInClass:'fade-in',
    animateOutClass:'fade-out',
    interval : 5000,
    startIndex : 0,
    autoPlay : true,
    controller : true,
    controllerClass  : 'crosscover-controller',
    prevClass : 'crosscover-prev',
    nextClass : 'crosscover-next',
    playerClass : 'crosscover-player',
    playerActiveClass : 'is-playing',
    playerInnerHtml : '<span class="crosscover-icon-player"></span>',
    prevInnerHtml : '<span class="crosscover-icon-prev"></span>',
    nextInnerHtml : '<span class="crosscover-icon-next"></span>'
});                
              

可用的动画效果