jq swiper动画

约定不等于承诺〃 2021-07-25 02:23 507阅读 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