swiper轮播运动效果图中集成
用swiper做运动效果非常好，各种功能很强大：容易上手对于前端开发人员来说使用swiper可以提高工作效率，不再需要写太多的代码，轻轻松松的实现想要的效果，目前做移动端挺多人用的
<!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"> *{ padding: 0; margin: 0; } .swiper-container { width: 100%; height: 600px; border: 1px solid darkcyan; margin: 0 auto; } .swiper-container .swiper-wrapper .swiper-slide.one{ background: url(https://www.qiquanji.com/mip/data/img/dmj/201903171552807850196857.jpg) no-repeat; background-size: 100% 100%; } .swiper-container .swiper-wrapper .swiper-slide.one .center{ width: 1000px; height: 600px; background: yellow; margin: 0 auto; } .swiper-container .swiper-wrapper .swiper-slide.one .center .pic1{ display: block; margin: 0 auto; margin-top: 50px; } .swiper-container .swiper-wrapper .swiper-slide.one .center .pic2{ display: block; margin: 0 auto; margin-top: 50px; } .swiper-container .swiper-wrapper .swiper-slide.one{ background: url(https://www.qiquanji.com/mip/data/img/dmj/201903171552807850196857.jpg) no-repeat; background-size: 100% 100%; } .swiper-container .swiper-wrapper .swiper-slide.tow{ background: url(nn/t07.jpg) no-repeat; background-size: 100% 100%; } .swiper-container .swiper-wrapper .swiper-slide.two .center{ width: 1000px; height: 600px; background: yellow; margin: 0 auto; } .swiper-container .swiper-wrapper .swiper-slide.two .center .pic1{ margin-top: 50px; display: block; } .swiper-container .swiper-wrapper .swiper-slide.two .center .pic2{ margin-top: 20px; display: block; } .swiper-container .swiper-wrapper .swiper-slide.three{ background: url(nn/t08.jpg) no-repeat; background-size: 100% 100%; } .swiper-container .swiper-wrapper .swiper-slide.three .center{ width: 1000px; height: 600px; background: yellow; margin: 0 auto; } .swiper-container .swiper-wrapper .swiper-slide.three .center .pic1{ margin-top: 50px; display: block; } .swiper-container .swiper-wrapper .swiper-slide.three .center .pic2{ margin-top: 20px; display: block; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide one"> <div class="center"> <img class="pic1 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" src="https://www.qiquanji.com/mip/data/img/dmj/201903171552807975192544.jpg"/> <img class="pic2 ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s" src="https://www.qiquanji.com/mip/data/img/dmj/201903171552808023283246.jpg"/> </div> </div> <div class="swiper-slide two"> <div class="center"> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903171552808063199963.jpg" alt="" class="pic1" /> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903171552808091149618.jpg" alt="" class="pic2" /> </div> <div class="swiper-slide three"> <div class="center"> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903171552808134144886.jpg" alt="" class="pic1" /> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903171552808174208509.jpg" alt="" class="pic2" /> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></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', }, // 运动的初始化 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,我们将及时处理。
微信扫码关注
更新实时通知