<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/swiper.css"/> <style type="text/css"> .swiper-container{ width: 600px; height: 300px; margin: 0 auto; border:1px solid #ccc } .h1{ background: skyblue; transition: all 2s; } .h2{ background: pink; transform: translate(-300px,0); opacity: 0; } .h2huaru{ animation: huaru 3s; } @keyframes huaru{ from{transform: translate(-300px,0);opacity: 0;} to{transform: translate(0,0);opacity: 1;} } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide"> <h1 class="h1">slide 2</h1> <h2 class="h2">这是1个划入动画</h2> </div> <div class="swiper-slide">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="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> <script src="js/swiper.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var selector = '.swiper-container' var config = { direction:'horizontal', loop: true, autoplay:true, // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 // scrollbar: { // el: '.swiper-scrollbar', // }, on:{ slideChange:function(){ // console.log(this) if(this.activeIndex == 2){ $('h1').css({ background:'pink' }) $('.h2').addClass('h2huaru') } } } } var mySwiper = new Swiper (selector,config) </script> </body> </html>