1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link type="text/css" rel="stylesheet" href="swiper-dist/css/swiper.css" />
7 <!-- 如果引入swiper.jquery.js，那么在这之前需要引入jquery -->
8 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
9 <script src="swiper-dist/js/swiper.jquery.js"></script>
10
11 <link type="text/css" rel="stylesheet" href="animate.min.css" />
12 <script src="swiper.animate.min.js"></script>
13
14 <!--<script src="swiper-dist/js/swiper.js"></script>-->
15 <style>
16 .swiper-container {
17 width: 600px;
18 height: 300px;
19 background: red;
20 }
21 .box{
22 margin: 20px;
23 width: 300px;
24 height: 80px;
25 background: yellowgreen;
26 font-size: 24px;
27 text-align: center;
28 line-height: 80px;
29 color: #fff;
30 }
31 </style>
32 </head>
33 <body>
34
35 <div class="swiper-container contaianer">
36 <!-- 内容部分 -->
37 <div class="swiper-wrapper">
38 <!-- 每一页 -->
39 <div class="swiper-slide">
40 0
41 <div class="box ani" swiper-animate-effect="rollIn" swiper-animate-duration='1s'
42 swiper-animate-delay="0s">阿萨德发士大夫撒旦</div>
43
44 <div class="box rollIn animated">阿萨德发士大夫撒旦</div>
45
46 </div>
47 <div class="swiper-slide">
48 1
49 <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->
50 </div>
51 <div class="swiper-slide">
52 2
53 <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->
54 </div>
55 </div>
56 </div>
57
58 <button onclick="btnAction()">按钮</button>
59
60
61 <script>
62 //常见swiper对象
63 //参数1：swiper容器选择器，或者dom对象
64 //参数2：swiper配置项
65 var con = document.querySelector('.swiper-container');
66 var mySwiper = new Swiper(con, {
67 loop: true,
68 onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
69 swiperAnimateCache(swiper); //隐藏动画元素
70 swiperAnimate(swiper); //初始化完成开始动画
71 },
72 onSlideChangeEnd: function(swiper){
73 swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
74 } ,
75 onTouchEnd: function(swiper){
76 console.log('end');
77 swiperAnimate(swiper);
78 }
79 })
80
81 function btnAction(){
82 // alert(1)
83 console.log(swiperAnimate)
84
85 swiperAnimateCache(mySwiper);
86 swiperAnimate(mySwiper);
87
88 }
89
90
91 </script>
92
93
94
95
96 </body>
97 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link type="text/css" rel="stylesheet" href="swiper-dist/css/swiper.css" />
7 <!-- 如果引入swiper.jquery.js，那么在这之前需要引入jquery -->
8 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
9 <script src="swiper-dist/js/swiper.jquery.js"></script>
10
11 <link type="text/css" rel="stylesheet" href="animate.min.css" />
12 <script src="swiper.animate.min.js"></script>
13
14 <!--<script src="swiper-dist/js/swiper.js"></script>-->
15 <style>
16 .swiper-container {
17 width: 600px;
18 height: 300px;
19 background: red;
20 }
21 .box{
22 margin: 20px;
23 width: 300px;
24 height: 80px;
25 background: yellowgreen;
26 font-size: 24px;
27 text-align: center;
28 line-height: 80px;
29 color: #fff;
30 }
31
32 @keyframes my-animate{
33 from{
34 transform: translateX(-200px) scale(0.2);
35 }
36 to{
37 transform: translateX(0) scale(1);
38 }
39 }
40 .myAni{
41 animation-name: my-animate;
42 }
43
44 </style>
45 </head>
46 <body>
47
48 <div class="swiper-container contaianer">
49 <!-- 内容部分 -->
50 <div class="swiper-wrapper">
51 <!-- 每一页 -->
52 <div class="swiper-slide">
53 <div class="box ani" swiper-animate-effect="rollIn" swiper-animate-duration='1s'
54 swiper-animate-delay="0s">阿萨德发士大夫撒旦</div>
55
56 <div class="box myAni animated">阿萨德发士大夫撒旦</div>
57
58 <div class="box ani" swiper-animate-effect="myAni" swiper-animate-duration='1s'>阿萨德发士大夫撒旦</div>
59
60 </div>
61 <div class="swiper-slide">
62 <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->
63 </div>
64 <div class="swiper-slide">
65 <!--<div class="box rollIn animated">阿萨德发士大夫撒旦</div>-->
66 </div>
67 </div>
68 </div>
69
70
71 <script>
72 //常见swiper对象
73 //参数1：swiper容器选择器，或者dom对象
74 //参数2：swiper配置项
75 var con = document.querySelector('.swiper-container');
76 var mySwiper = new Swiper(con, {
77 loop: true,
78 onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
79 swiperAnimateCache(swiper); //隐藏动画元素
80 swiperAnimate(swiper); //初始化完成开始动画
81 },
82 onSlideChangeEnd: function(swiper){
83 swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
84 }
85 })
86
87
88
89 </script>
90
91
92
93
94 </body>
95 </html>
