swiper animate运动的实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../uu/swiper-4.4.1.min.css"> <link rel="stylesheet" href="../uu/animate.min.css"> <style type="text/css"> .swiper-container { width: 800px; height: 400px; border: 1px solid darkcyan; margin: 100px auto; } .swiper-container .swiper-wrapper .swiper-slide.one h1{ width: 400px; margin: 100px auto; text-align: center; } .swiper-container .swiper-wrapper .swiper-slide.one p{ width: 300px; margin: 100px auto; text-align: center; font-size: 16px; } .swiper-container .swiper-wrapper .swiper-slide{ text-align: center; line-height: 400px; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide one" style="background: darkblue;color: white;" > <h1 class=" ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="1s">这里是H1的内容</h1> <p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s">50 swiper animate运动的实现</p></div> <div class="swiper-slide" style="background: darkcyan;">Slide 2</div> <div class="swiper-slide" style="background: darkgoldenrod;">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div> <script src="../uu/swiper-4.4.1.min.js"></script> <script src="../uu/swiper.animate1.0.3.min.js" type="text/javascript"></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, // 运动的初始化 on:{ init: function(){ swiperAnimateCache(this); //隐藏动画元素 swiperAnimate(this); //初始化完成开始动画 }, slideChangeTransitionEnd: function(){ swiperAnimate(this); //每个slide切换结束时也运行当前slide动画 //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名 } } }) </script> </body> </html> 代码效果点上面的（运行代码）看
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知