swiper的animation动画实现方式
程序员文章站
2024-03-24 20:51:40
...
关注小编微信公众号公众号【前端基础教程从0开始】回复“1”，拉你进程序员技术讨论群，群内有大神，可以免费提供问题解答。公众号回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”，领取300G前端，Java，产品经理，微信小程序，Python等资源合集大放送，让我们一起学前端。
文件下载地址：
链接：https://pan.baidu.com/s/1dWWK8UoraaelXSnwQnkNhw
提取码：ptgj
1.竖屏全屏轮播效果：
<head>内：
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/swiper.min.js"></script>
<body>内：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
<script>内：
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
})
2.横屏效果：
只更改js为：
var mySwiper = new Swiper (’.swiper-container’, {
})
/这是最简单的全屏轮播。许多属性没写，想写的话可以看api官网/
3.横竖屏交叉的全屏轮播：
<head>内的引用一致；
<body>内：
<!-- Swiper -->
<div class="swiper-container swiper-container-h">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide4</div>
<div class="swiper-slide">
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide">竖向内容一</div>
<div class="swiper-slide">竖向内容二</div>
<div class="swiper-slide">竖向内容三</div>
<div class="swiper-slide">竖向内容四</div>
</div>
</div>
</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<!-- <div class="swiper-pagination"></div>-->
</div>
<script>内：
var mySwiper = new Swiper ('.swiper-container-v', {
direction: 'vertical',
})
var Swiper = new Swiper ('.swiper-container-h', {
})
4.普通的竖屏轮播加animation动画
<head>内：
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<style>
.swiper-container {
width: 600px;
height: 300px;
background-color: red;
}
</style>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<body>内：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="ani aa" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容1</p>
</div>
<div class="swiper-slide">
<p class="ani bb" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" style=" visibility: visible;">内容2</p>
</div>
<div class="swiper-slide">
<p class="ani cc" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" style=" visibility: visible;">内容3</p>
</div>
</div>
</div>
<!--effect:效果 duration：持续时间 delay：等待时间-->
<script>内：
//Swiper3.x、Swiper2.x
//var mySwiper = new Swiper ('.swiper-container', {
// onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
// swiperAnimateCache(swiper); //隐藏动画元素
// swiperAnimate(swiper); //初始化完成开始动画
// },
// onSlideChangeEnd: function(swiper){
// swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
// }
//})
//Swiper4.x
var mySwiper1 = new Swiper ('.swiper-container', {
direction: 'vertical',//竖屏
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
}
}
})
//横屏与竖屏基本一致，就去掉js中 direction:'vertical',一句就可以。
5.竖屏可以有两次不同的动画
<head>内：
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script src="js/jquery-1.12.3.min.js"></script>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<body>内：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><span class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">Slide 1</span></div>
<div class="swiper-slide"><span class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">Slide 2</span></div>
<div class="swiper-slide"><span class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">Slide 3</span></div>
</div>
</div>
<script>内：
var mySwiper1 = new Swiper ('.swiper-container', {
direction: 'vertical',//竖屏
on:{
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionEnd: function(){
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
}
}
})
/*
at 后面跟的是 动画延迟时间
from 后面跟的是 动画样式
use 后面跟的是 动画力度
during 后面跟的是 动画持续时间
force 后面跟的是 是否使用 只有在出场动画的时候使用。进场动画无效。。
*/
本文原创实属不易，转载时请注明出处及相应链接，希望大家多多点赞！
下一篇： css3定义动画@keyframes