jQuery
【jQuery】jQueryとanimation.cssを使用した背景画像カルーセルCROSSCOVER
August 9, 2015

CROSSCOVERはjQueryとanimation.cssを使用した簡単な背景画像のカルーセル。
デモに掲載されているアニメーションはFADE9、ZOOM4、ROTATE5、FLIP2、LIGHTSPEED1。
<!-- 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="https://ajax.googleapis.com/ajax/libs/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>' });