swiper滑动实现幻灯片功能及swiper animate的动画特效

来源：互联网发布：新网互联域名如何续费编辑：程序博客网时间：2024/06/05 00:54

怎么实现手机滑动实现幻灯效果呢？目前网上有很多插件可以实现，本人选了一款非常不错的插件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标签里引入

   <!--手触滑动-->     <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写法

<div class="swiper-container">  <div class="swiper-wrapper">    <div class="swiper-slide">slider1</div>    <div class="swiper-slide">slider2</div>    <div class="swiper-slide">slider3</div>  </div></div>    <span style="font-size:14px;">第四步：js初始化swiper</span>

var mySwiper = new Swiper('.swiper-container',{autoplay : 5000,//可选选项，自动滑动})

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

<!-- HTML5 -->  <!DOCTYPE html><html><head>        <meta charset="utf-8">        <meta name="apple-mobile-web-app-capable" content="yes">        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">                <!--自适应大-->        <link rel="stylesheet" type="text/css" href="assets/lib/css/bootstrap.css">        <!--手触滑动-->     <link rel="stylesheet" type="text/css" href="assets/lib/css/swiper3.06.min.css">        <!--动画库CSS-->        <link rel="stylesheet" type="text/css" href="assets/lib/css/animate.min.css">        <!--向上提示箭头样式-->     <span style="font-size:14px;"> 这个样式是自己写的</span>

<link rel="stylesheet" type="text/css" href="assets/css/huanDeng/upJianTou.css">

 <!--flash动画--><script src="assets/lib/js/movive/swfobject.js"></script>                    </head>      <body style="overflow:hidden;">    <!--添加播放暂停按钮-->        <div id="voiceId" style="position:absolute; top:20px; right:30px; z-index:10000" onClick="openOrCloseMusic()"></div>        <!--添加音乐播放-->        <audio class="audio" id="music" autoplay="autoplay" loop></audio><div class="swiper-container parent" style="width:360px;height:700px; background-color:#9CF;">    <div class="swiper-pagination"></div><!--分页器-->         <!-- 如果需要导航按钮 -->    <div class="swiper-button-prev" style=" background-image:url(assets/lib/img/prev.png);" ></div>    <div class="swiper-button-next" style=" background-image:url(assets/lib/img/next.png);"></div>        <div class="swiper-wrapper">          <div class="swiper-slide">            <div class="ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="3s" swiper-animate-delay="4.5s"                style="top:30px;left:80px;width:150px;background-color:#999;position:absolute; ">                <label style="color:#006;font-size:36px;text-align:center;">春晓</label>                 </div>                <div class="ani" swiper-animate-effect="rotateInDownRight" swiper-animate-duration="1s" swiper-animate-delay="1.5s"                style="width:210px; height:200px;top:110px;left:115px;position:absolute;">                <label style="color:#C00; text-align:right; font-size:18px; ">春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.                    春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.</label>                </div>                                <div class="ani" swiper-animate-effect="rollIn" swiper-animate-duration="2s" swiper-animate-delay="1s"                 style=" width:100px;height:auto;top:70px;left:10px;position:absolute;">                <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;">                </div>                <div class="ani" swiper-animate-effect="fadeInUpBig" swiper-animate-duration="2s" swiper-animate-delay="2.5s"                style="top:200px;left:10px; position:absolute;" >           <img src="assets/images/test/book2.png"  style="filter:alpha(opacity=10);">                </div>                <div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="2s" swiper-animate-delay="2.8s"                 style="top:280px;left:30px; position:absolute">                <h1 style="color:#F00">飞猫测试1</h1>                </div>                 <div class="ani" swiper-animate-effect="fadeInLeftBig" swiper-animate-duration="1.5s" swiper-animate-delay="2.9s"                  style="top:500px;left:30px; position:absolute">                <h1 style="color:#F00">飞猫测试2</h1>                </div>               <div class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.5s" swiper-animate-delay="3.5s"                style="top:600px;left:30px; position:absolute">                <h1 style="color:#F00">飞猫测试3</h1>                </div>            </div>                        <div class="swiper-slide">            <div class="ani" swiper-animate-effect="flipInY" swiper-animate-duration="1.5s" swiper-animate-delay="2s"                style="top:30px;left:80px;width:150px;background-color:#999;position:absolute; ">                <label style="color:#006;font-size:36px;text-align:center;">春晓</label>                 </div>                <div class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s"                style="width:210px; height:200px;top:110px;left:115px;position:absolute;">                <label style="color:#C00; text-align:right; font-size:18px; ">春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.                    春眠不觉晓,处处闻啼鸟.夜来风雨声,花落知多少.</label>                </div>                          </div>                      <div class="swiper-slide">                 <div class="swiper-container chlidren" style="widows:360px;height:700px;">                  <!--向上滑动提示箭头-->                           <div class="s-xguide-down trans" style="background:url(assets/lib/img/up48.png)"></div> <div class="s-xguide-down arrow-1 trans" style="background:url(assets/lib/img/up48.png)" ></div>                  <div class="swiper-wrapper">                        <div class="swiper-slide">                        <div style="text-align:center;top:280px;left:30px; position:absolute"><h1>已结到终点了,赶快上滑评论哦！</h1></div>                                                   </div>                         <div class="swiper-slide">                        <div style="text-align:center"><h1>留言评论吧！</h1></div>                        </div>                                        </div>                </div>                    </div>        </div>

    <script src="assets/lib/js/jquery.js"></script><script src="assets/lib/js/swiper3.06.min.js"></script><!--基于swiper的动画库--><script src="assets/lib/js/swiper.animate1.0.2.min.js"></script>

<script>      //音乐播放与暂停  function openOrCloseMusic(){  var audio = document.getElementById('music');                if(audio!==null){//判断是否获得                    if(audio.paused){//获得播放状态,这个属性应该是是否是暂停状态,如果是就播放,如果不是暂停就暂停                        audio.play();                    }else{                        audio.pause();                    }                }  }

   $().ready(function(e) { //初始化时，加载音乐 var urlMusic = "assets/music/music1.mp3"; $(".audio").attr("src",urlMusic);              //加载音量图标 $("#voiceId").css("backgroundImage","url(assets/lib/img/voice3.gif)"); $("#voiceId").css("width","14.5px"); $("#voiceId").css("height","20px"); //设置PC端的设计面板大小,只要数值，不要px var widthPC = parseInt($(".swiper-container").css('width')); var heightPC = parseInt($(".swiper-container").css('height')); //获取屏幕分辨率，设置大小             var width = $(window).width(); var height = $(window).height() //设置body的宽和高为当前设备的宽和高 $("body").css('width',width); $("body").css('height',height);  //计算对比值 var x = width/widthPC; var y = height/heightPC; //根据情况设置容器缩放原点(左右滑动最外面的容器) if(width>widthPC){ //transform-origin:top;$(".parent").css('transform-origin','top');$(".parent").css('-ms-transform-origin','top');$(".parent").css('-webkit-transform','top');$(".parent").css('-moz-transform','top');$(".parent").css('-o-transform-origin','top'); }else{$(".parent").css('transform-origin','top left');$(".parent").css('-ms-transform-origin','top left');$(".parent").css('-webkit-transform','top left');$(".parent").css('-moz-transform','top left');$(".parent").css('-o-transform-origin','top left'); }//设置容器元素按照比例缩放（左右滑动最外面的容器）$(".parent").css('-webkit-transform','scale('+x+','+y+')'); //Safari 和 Chrome支持$(".parent").css('-ms-transform','scale('+x+','+y+')'); //IE9支持$(".parent").css('transform','scale('+x+','+y+')'); //IE9支持$(".parent").css('-moz-transform','scale('+x+','+y+')'); //firefox支持$(".parent").css('-o-transform','scale('+x+','+y+')'); //opera支持

 //拖拽var swiperParent = $(".parent").swiper({//播放动画（一页一页播放） onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit    swiperAnimateCache(swiper);      swiperAnimate(swiper);   },   onSlideChangeEnd: function(swiper){     swiperAnimate(swiper);   } ,direction: 'horizontal',//垂直    horizontal 水平  vertical 垂直loop: false, //使成环roundLengths:true, //值为true时，Swiper会四舍五入宽度和高度，在响应式的滑块中包含误差时十分有用。 grabCursor:true,//鼠标变成手keyboardControl:true, //能够使用键盘上下左右滑动//mode : 'horizontal', //切换到垂直模式  　　speed : 600, //动画持续时间  pagination: '.swiper-pagination',//分页器effect: 'coverflow', //slide的切换效果，默认为 slide（ 位移切换），可设置为 fade（淡入）cube（方块） coverflow （3d流）        cube: {  slideShadows: false, //开启slide阴影。默认 true。  shadow: false,   //开启投影。默认 true。 // shadowOffset: 20, //投影距离。默认 20，单位px。//  shadowScale: 0.94 //投影缩放比例。默认0.94。},// 如果需要前进后退按钮    nextButton: '.swiper-button-next',    prevButton: '.swiper-button-prev',        }) var swiperChlidren = $(".chlidren").swiper({direction: 'vertical',//垂直    horizontal 水平  vertical 垂直//回调函数，滑块释放时如果触发slider切换则执行。free模式下无效。//用来隐藏和显示上滑提示箭头 onSlideChangeStart: function(swiperChlidren){ if($(".s-xguide-down").css('display')!="none"){  $(".s-xguide-down").css('display','none');  //隐藏左右滑动按钮，并且锁定滑块，禁止滑动  $(".swiper-button-prev").css('display','none');  $(".swiper-button-next").css('display','none');  //禁止滑动（左右滑块禁止滑动）  swiperParent.lockSwipes();//锁定swiper，阻止其拖动  //取消分页  $(".swiper-pagination").css('display','none'); } else{  $(".s-xguide-down").css('display','inline');  //显示左右滑动按钮，并且解锁滑块  $(".swiper-button-prev").css('display','inline');  $(".swiper-button-next").css('display','inline');  //解锁，允许拖动  swiperParent.unlockSwipes();  $(".swiper-pagination").css('display','inline'); }}})        });             </script> </body></html>

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

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

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

1 0