jq swiper动画 约定不等于承诺〃 2021-07-25 02:23 428阅读 0赞 动画教程地址:[动画教程地址][Link 1] 使用需要引入文件 swiper.jquery.min.js animate.min.css swiper.animate1.0.2.min.js 代码示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .swiper-container{ width:560px; height: 300px; margin: 100px auto; border: solid 1px orange; } #p1{ background-color: orangered; border-radius: 30%; } </style> <script src="js/jquery-3.4.1.js"></script> <link href="css/swiper.min.css" rel='stylesheet' /> <script src="js/swiper.jquery.min.js"></script> <link rel="stylesheet" href='css/animate.min.css' /> <script src="js/swiper.animate1.0.2.min.js"></script> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <p id="p1" swiper-animate-effect="fadeInUp" class='ani' style="position: absolute;">你好我是文字</p> <img src="img/0.jpg" alt="" /></div> <div class="swiper-slide"> <p class='ani' swiper-animate-effect="wobble" style="position: absolute;">是的我很好</p> <img src="img/1.jpg" alt="" /></div> <div class="swiper-slide"> <p class='ani' swiper-animate-effect="bounceInUp" style="position: absolute;">呵呵</p> <img src="img/2.jpg" alt="" /></div> <div class="swiper-slide"><img src="img/3.jpg" alt="" /></div> <div class="swiper-slide"><img src="img/4.jpg" alt="" /></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> var mySwiper = new Swiper ('.swiper-container', { // direction: 'vertical', loop: true, //---------------------------------------------------------------------- //引用api文档其他效果 effect:'cube', autoplay:1000, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 scrollbar: '.swiper-scrollbar', //-------------------------------添加动画效果 onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit swiperAnimateCache(swiper); //隐藏动画元素 swiperAnimate(swiper); //初始化完成开始动画 }, onSlideChangeEnd: function(swiper){ swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画 } }) </script> </body> </script> </body> </html> [Link 1]: https://3.swiper.com.cn/usage/animate/index.html
还没有评论,来说两句吧...