基于Animate全屏幻灯片jQuery插件

<!-- 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>

<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>

$(".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>'

});