19年swiper已经更新到4.0 与视频里的内容完全不一样的
来源：2-4 编程练习
soso_crazy
2019-06-01 17:34:43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../../课程代码/swiper官方文件/swiper-4.5.0/dist/css/swiper.min.css">
<link rel="stylesheet" href="../../课程代码/swiper官方文件/swiper-animate/animate.min.css">
<!-- 使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。 -->
<link rel="stylesheet" href="./css/2-4practice.css">
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://climg.mukewang.com/59f2f3c60001e51206000600.jpg" alt="" class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
<!-- 在需要运动的元素上面增加类名 ani，和其他的类似插件相同，Swiper Animate需要指定几个参数：
swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
-->
</div>
<div class="swiper-slide"><img src="http://climg.mukewang.com/59f2f3dc0001512e06000533.jpg" alt="" class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
<div class="swiper-slide"><img src="http://climg.mukewang.com/59f2f3fb0001725305000707.jpg" alt="" class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
</div>
</div>
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script src="../../课程代码/swiper官方文件/swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="../../课程代码/swiper官方文件/swiper-animate/swiper.animate1.0.3.min.js"></script>
<script src="./js/2-4practice.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
}
img,
html,
body,
.swiper-container,
.swiper-wrapper,
.swiper-slide {
width: 100%;
height: 100%;
}
img {
border: none;
vertical-align: top;
background-size: cover;
}
$(function() {
var mySwiper = new Swiper('.swiper-container', {
loop: true,
autoplay: 2000,
on: { // 初始化时隐藏元素并在需要的时刻开始动画。
init: function() {
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); // 初始化完成开始动画
},
slideChangeTransitionEnd: function() {
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
}
}
})
})
不知道这样写是否正确，我是参考swiper animate的使用来写的，不知道覆盖是哪一个swiper-animate-effect，就随便写一个上去。
1回答
-
好帮手慕星星
2019-06-01
你好，经测试并不是覆盖的效果，swiper官网上是有这个案例演示的：
在官网首页点击swiper2：
进去之后在演示中progress插件：
点击进去就可以看到覆盖效果：
这是直接进入的链接：
https://2.swiper.com.cn/demo/smooth/demo-inverse-cover.html
可以直接在控制台中查看源码：
现在课程优化版本升级正在规划中，制作课程需要一定的周期，同学可以继续往下面学习，当前课程不影响后面部分，可以及时关注课程公告通知。
祝学习愉快！
0
相似问题