devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

swiper滑动实现幻灯片功能及swiper animate的动画特效_swipper 幻灯片图片映射效果

作者：我家小花儿 | 2024-03-23 05:14:23

赞

踩

swipper 幻灯片图片映射效果

           怎么实现手机滑动实现幻灯效果呢？目前网上有很多插件可以实现，本人选了一款非常不错的插件swiper.js，原因有很多，当然这款插件最符合项目的需要。所以在此推荐给大家。

            那么在实现滑动幻灯效果，而且还能实现元素的动画特效，不就更酷炫了吗？动画特效可以用CSS3来自己实现，但是已经有大侠专门写了一个动画库animate.css，只需要指明类名和动画名就能轻松实现动画，只是怎么和滑动结合呢？如果你使用animate.css的话，就会发现动画是加载后一下子就全部播放了，而你想实现的肯定是滑动一页动画播放一页的效果，不用担心，swiper官网里有一个专门针对swiper的动画库swiper.animate.min.js和animate.min.css，直接下载就可以使用。

            swiper官网地址：http://www.swiper.com.cn/

         是否使用这个滑动插件，要根据项目需求，目前bootstraps响应式开发比较流行，其实用bootstraps也可以实现滑动的功能，这个写法可以去官网上查看。在这里就不多做解释了。

 

下面就来介绍swiper滑动的用法。

         第一步：在官网下载相应的js，css（swiper3.06.min.css和swiper3.06.min.js）

         第二步：head标签里引入

  1.    <!--手触滑动-->
  2.      	<link rel="stylesheet" type="text/css" href="assets/lib/css/swiper3.06.min.css">
<script src="assets/lib/js/swiper3.06.min.js"></script>

           第三步：body写法

  1. <div class="swiper-container">
  2.   <div class="swiper-wrapper">
  3.     <div class="swiper-slide">slider1</div>
  4.     <div class="swiper-slide">slider2</div>
  5.     <div class="swiper-slide">slider3</div>
  6.   </div>
  7. </div>
  8.  
  9.     <span style="font-size:14px;">第四步：js初始化swiper</span>
  1. var mySwiper = new Swiper('.swiper-container',{
  2. autoplay : 5000,//可选选项，自动滑动
  3. })

       好了，这么就是实现了简单的滑动效果了。是不是很简单啊...    swiper还有很多属性，事件，方法等这个在官网上的帮助文档可以查看。下面就说下我在项目中用swiper实现的功能（动画，左右滑动穿插上下滑动，分页，滑动按钮，背景音乐等）

  1. <!-- HTML5 -->  
  2. <!DOCTYPE html>
  3. <html>
  4.  
  5. 	<head>
  6.         <meta charset="utf-8">
  7.         <meta name="apple-mobile-web-app-capable" content="yes">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  9.     
  10.        
  11.      	<!--自适应大-->
  12.         <link rel="stylesheet" type="text/css" href="assets/lib/css/bootstrap.css">
  13.         <!--手触滑动-->
  14.      	<link rel="stylesheet" type="text/css" href="assets/lib/css/swiper3.06.min.css">
  15.         <!--动画库CSS-->
  16.         <link rel="stylesheet" type="text/css" href="assets/lib/css/animate.min.css">
  17.         <!--向上提示箭头样式-->
  18.      <span style="font-size:14px;"> 这个样式是自己写的</span>
	<link rel="stylesheet" type="text/css" href="assets/css/huanDeng/upJianTou.css">
       
  1.  <!--flash动画-->
  2. 		<script src="assets/lib/js/movive/swfobject.js"></script>
  3.         
  4.         
  5.     </head>
  6.     
  7.   
  8. <body style="overflow:hidden;">
  9. 	    <!--添加播放暂停按钮-->
  10.         <div id="voiceId" style="position:absolute; top:20px; right:30px; z-index:10000" onClick="openOrCloseMusic()"></div>
  11.         <!--添加音乐播放-->
  12.         <audio class="audio" id="music" autoplay="autoplay" loop></audio>
  13. 	<div class="swiper-container parent" style="width:360px;height:700px; background-color:#9CF;">
  14.     	<div class="swiper-pagination"></div><!--分页器-->
  15.          <!-- 如果需要导航按钮 -->
  16.     	<div class="swiper-button-prev" style=" background-image:url(assets/lib/img/prev.png);" ></div>
  17.     	<div class="swiper-button-next" style=" background-image:url(assets/lib/img/next.png);"></div>
  18.         <div class="swiper-wrapper">
  19.           <div class="swiper-slide">
  20.             	<div class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="3s" swiper-animate-delay="4.5s"
  21.                 style="top:30px;left:80px;width:150px;background-color:#999;position:absolute; ">
  22.                 	<label style="color:#006;font-size:36px;text-align:center;">春晓</label> 
  23.                 </div>
  24.                 <div class="ani" swiper-animate-effect="rotateInDownRight" swiper-animate-duration="1s" swiper-animate-delay="1.5s"
  25.                 style="width:210px; height:200px;top:110px;left:115px;position:absolute;">
  26.                 	<label style="color:#C00; text-align:right; font-size:18px; ">春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.
  27.                     春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.</label>
  28.                 </div>
  29.                 
  30.                 <div class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s" swiper-animate-delay="1s"
  31.                  style=" width:100px;height:auto;top:70px;left:10px;position:absolute;">
  32.                 	<img src="assets/images/test/slider-fsw-logo.png" style="filter:alpha(opacity=70);-moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7;">
  33.                 </div>
  34.                 <div class="ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="2s" swiper-animate-delay="2.5s"
  35.                 style="top:200px;left:10px; position:absolute;" >
  36.            			<img src="assets/images/test/book2.png"  style="filter:alpha(opacity=10);">
  37.                 </div>
  38.                 <div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="2.8s"
  39.                  style="top:280px;left:30px; position:absolute">
  40.                 	<h1 style="color:#F00">飞猫测试1</h1>
  41.                 </div>
  42.                  <div class="ani" swiper-animate-effect="fadeInLeftBig" swiper-animate-duration="1.5s" swiper-animate-delay="2.9s"
  43.                   style="top:500px;left:30px; position:absolute">
  44.                 	<h1 style="color:#F00">飞猫测试2</h1>
  45.                 </div>
  46.                <div class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="3.5s"
  47.                 style="top:600px;left:30px; position:absolute">
  48.                 	<h1 style="color:#F00">飞猫测试3</h1>
  49.                 </div>
  50.             </div>
  51.             
  52.             <div class="swiper-slide">
  53.             	<div class="ani" swiper-animate-effect="flipInY" swiper-animate-duration="1.5s" swiper-animate-delay="2s"
  54.                 style="top:30px;left:80px;width:150px;background-color:#999;position:absolute; ">
  55.                 	<label style="color:#006;font-size:36px;text-align:center;">春晓</label> 
  56.                 </div>
  57.                 <div class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s"
  58.                 style="width:210px; height:200px;top:110px;left:115px;position:absolute;">
  59.                 	<label style="color:#C00; text-align:right; font-size:18px; ">春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.
  60.                     春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.</label>
  61.                 </div>
  62.               
  63.             </div>
  64.                       <div class="swiper-slide">
  65.                  <div class="swiper-container chlidren" style="widows:360px;height:700px;">
  66.                 	  <!--向上滑动提示箭头-->
  67.                            <div class="s-xguide-down trans" style="background:url(assets/lib/img/up48.png)"></div>
  68. 	 						<div class="s-xguide-down arrow-1 trans" style="background:url(assets/lib/img/up48.png)" ></div>
  69.                   	<div class="swiper-wrapper">
  70.                         <div class="swiper-slide">
  71.                         	<div style="text-align:center;top:280px;left:30px; position:absolute"><h1>已结到终点了,赶快上滑评论哦！</h1></div>
  72.                            	
  73.                         </div>
  74.                          <div class="swiper-slide">
  75.                         	<div style="text-align:center"><h1>留言评论吧！</h1></div>
  76.                         </div>
  77.                       
  78.                   </div>
  79.                 </div>
  80.             
  81.         </div>        
  82. 	</div>
  83.     
  1.     
  2. 	<script src="assets/lib/js/jquery.js"></script>
  3. 		
  4. 	<script src="assets/lib/js/swiper3.06.min.js"></script>
  5. 		<!--基于swiper的动画库-->
  6. 	<script src="assets/lib/js/swiper.animate1.0.2.min.js"></script>
  7. 	
  1. 	<script> 
  2. 	     			//音乐播放与暂停
  3. 		  function openOrCloseMusic(){
  4. 			  var audio = document.getElementById('music');
  5.                 if(audio!==null){//判断是否获得
  6.                     if(audio.paused){//获得播放状态,这个属性应该是是否是暂停状态,如果是就播放,如果不是暂停就暂停
  7.                         audio.play();
  8. 						
  9.                     }else{
  10.                         audio.pause();
  11. 						                    }
  12.                 }
  13. 		  }
  14. 			
 
  1.   
  2. 		 $().ready(function(e) {
  3. 			 //初始化时，加载音乐
  4. 			 var urlMusic = "assets/music/music1.mp3";
  5. 			 $(".audio").attr("src",urlMusic); 
  6.              //加载音量图标
  7. 			 $("#voiceId").css("backgroundImage","url(assets/lib/img/voice3.gif)");
  8. 			 $("#voiceId").css("width","14.5px");
  9. 			 $("#voiceId").css("height","20px");
  10. 			 //设置PC端的设计面板大小,只要数值，不要px
  11. 			 var widthPC = parseInt($(".swiper-container").css('width'));
  12. 			 var heightPC = parseInt($(".swiper-container").css('height'));
  13. 			 //获取屏幕分辨率，设置大小
  14. 			
  15.              var width = $(window).width();
  16. 			 var height = $(window).height()
  17. 			 //设置body的宽和高为当前设备的宽和高
  18. 			 $("body").css('width',width);
  19. 			 $("body").css('height',height);
  20. 			 
  21. 			 //计算对比值
  22. 			 var x = width/widthPC;
  23. 			 var y = height/heightPC;
  24. 			
  25. 			 //根据情况设置容器缩放原点(左右滑动最外面的容器)
  26. 			 if(width>widthPC){
  27. 				 	
  28. 					//transform-origin:top;
  29. 					$(".parent").css('transform-origin','top');
  30. 					$(".parent").css('-ms-transform-origin','top');
  31. 					$(".parent").css('-webkit-transform','top');
  32. 					$(".parent").css('-moz-transform','top');
  33. 					$(".parent").css('-o-transform-origin','top');
  34. 					
  35. 				 }else{
  36. 					$(".parent").css('transform-origin','top left');
  37. 					$(".parent").css('-ms-transform-origin','top left');
  38. 					$(".parent").css('-webkit-transform','top left');
  39. 					$(".parent").css('-moz-transform','top left');
  40. 					$(".parent").css('-o-transform-origin','top left');
  41. 					 }
  42. 			//设置容器元素按照比例缩放（左右滑动最外面的容器）
  43. 			$(".parent").css('-webkit-transform','scale('+x+','+y+')'); //Safari 和 Chrome支持
  44. 			$(".parent").css('-ms-transform','scale('+x+','+y+')'); //IE9支持
  45. 			$(".parent").css('transform','scale('+x+','+y+')'); //IE9支持
  46. 			$(".parent").css('-moz-transform','scale('+x+','+y+')'); //firefox支持
  47. 			$(".parent").css('-o-transform','scale('+x+','+y+')'); //opera支持
  48. 			
  49.  
 
  1. 			 //拖拽
  2. 			var swiperParent = $(".parent").swiper({
  3. 				//播放动画（一页一页播放） 
  4. 			onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
  5.    				 swiperAnimateCache(swiper); 
  6.     			 swiperAnimate(swiper); 
  7.   				}, 
  8.   			onSlideChangeEnd: function(swiper){ 
  9.     				swiperAnimate(swiper); 
  10.   					} ,
  11. 			
  12. 			direction: 'horizontal',//垂直    horizontal 水平  vertical 垂直
  13. 			loop: false, //使成环
  14. 			roundLengths:true, //值为true时，Swiper会四舍五入宽度和高度，在响应式的滑块中包含误差时十分有用。 	
  15. 			grabCursor:true,//鼠标变成手
  16. 			keyboardControl:true, //能够使用键盘上下左右滑动
  17. 			//mode : 'horizontal', //切换到垂直模式
  18. 	  　　	speed : 600, //动画持续时间
  19. 	  		
  20. 			pagination: '.swiper-pagination',//分页器
  21. 			effect: 'coverflow', //slide的切换效果，默认为 slide（ 位移切换），可设置为 fade（淡入）cube（方块） coverflow （3d流）
  22.         	cube: {
  23. 			  slideShadows: false, //开启slide阴影。默认 true。
  24. 			  shadow: false,   //开启投影。默认 true。
  25. 			 // shadowOffset: 20, //投影距离。默认 20，单位px。
  26. 			//  shadowScale: 0.94 //投影缩放比例。默认0.94。
  27. 			},
  28.  
  29. 			// 如果需要前进后退按钮
  30.     		nextButton: '.swiper-button-next',
  31.    		 	prevButton: '.swiper-button-prev',
  32. 			
  33.         	
  34. 			
  35. 			
  36. 		})
  37. 			 
  38. 		var swiperChlidren = $(".chlidren").swiper({
  39. 			direction: 'vertical',//垂直    horizontal 水平  vertical 垂直
  40. 			
  41. 			//回调函数，滑块释放时如果触发slider切换则执行。free模式下无效。
  42. 			//用来隐藏和显示上滑提示箭头
  43. 			 onSlideChangeStart: function(swiperChlidren){
  44. 				 if($(".s-xguide-down").css('display')!="none"){
  45. 					
  46. 					  $(".s-xguide-down").css('display','none');
  47. 					  //隐藏左右滑动按钮，并且锁定滑块，禁止滑动
  48. 					  $(".swiper-button-prev").css('display','none');
  49. 					  $(".swiper-button-next").css('display','none');
  50. 					  //禁止滑动（左右滑块禁止滑动）
  51. 					  swiperParent.lockSwipes();//锁定swiper，阻止其拖动
  52. 					  //取消分页
  53. 					  $(".swiper-pagination").css('display','none');
  54. 					 }
  55. 				 else{
  56. 					
  57. 					  $(".s-xguide-down").css('display','inline');
  58. 					  //显示左右滑动按钮，并且解锁滑块
  59. 					  $(".swiper-button-prev").css('display','inline');
  60. 					  $(".swiper-button-next").css('display','inline');
  61. 					  //解锁，允许拖动
  62. 					  swiperParent.unlockSwipes();
  63. 					  $(".swiper-pagination").css('display','inline');
  64. 					 }
  65. 				
  66. 			}
  67. 		})
  68.  
  69.  
  70.         });        
  71. 		
  72.      </script>
  73.  
  74. </body>
  75. </html>

            代码不多，我也就懒得专门整理了，就全部给copy下来了，不需要的功能可以去掉，动画的使用官网上有帮助文档，非常简单，指定名称就行了。可以看到我在加载时 加载了音乐，设置了图标，接下来我获取了屏幕大小，手机大小，然后根据比例来进行缩放，为的是适应手机屏幕的大小 （这里不是响应式，手机幻灯肯定不能有滚动条，所以就只能缩放了，如果弄成响应式，那么在内容不够显示的时候，肯定会有上下滚动条，当然这里的缩放我使用了很简单的css3，在pc端显示会失真模糊，但是手机端就没有太大的问题，可能是手机分辨率比较好的原因吧，因为符合了我的需求，就使用这样缩放。当然，你也可以自己写缩放，会有点麻烦，目前还没有开源的缩放插件可以根据x,y来进行缩放，网上的zoom.js是无法实现要求的）。

            再下面的js就是swiper初始化声明了，第一个是父，第二个是子，父里面有动画效果显示为一页一页的代码。子的话有个回调方法，这个方法只是符合我的需求，你可以删掉的。代码注释很全，相信大侠们肯定都能够看懂的。

            各位发现什么错误或者有什么更好的方法一定要招呼我一声呀大笑


 



 

 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/293301
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号