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>'
});
可用的动画效果
bounce | flash | pulse | rubberBand |
shake | swing | tada | wobble |
jello | bounceIn | bounceInDown | bounceInLeft |
bounceInRight | bounceInUp | bounceOut | bounceOutDown |
bounceOutLeft | bounceOutRight | bounceOutUp | fadeIn |
fadeInDown | fadeInDownBig | fadeInLeft | fadeInLeftBig |
fadeInRight | fadeInRightBig | fadeInUp | fadeInUpBig |
fadeOut | fadeOutDown | fadeOutDownBig | fadeOutLeft |
fadeOutLeftBig | fadeOutRight | fadeOutRightBig | fadeOutUp |
fadeOutUpBig | flipInX | flipInY | flipOutX |
flipOutY | lightSpeedIn | lightSpeedOut | rotateIn |
rotateInDownLeft | rotateInDownRight | rotateInUpLeft | rotateInUpRight |
rotateOut | rotateOutDownLeft | rotateOutDownRight | rotateOutUpLeft |
rotateOutUpRight | hinge | rollIn | rollOut |
zoomIn | zoomInDown | zoomInLeft | zoomInRight |
zoomInUp | zoomOut | zoomOutDown | zoomOutLeft |
zoomOutRight | zoomOutUp | slideInDown | slideInLeft |
slideInRight | slideInUp | slideOutDown | slideOutLeft |
slideOutRight | slideOutUp |
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!