本文主要是介绍swiper滑动实现幻灯片功能及swiper animate的动画特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
怎么实现手机滑动实现幻灯效果呢？目前网上有很多插件可以实现，本人选了一款非常不错的插件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初始化声明了，第一个是父，第二个是子，父里面有动画效果显示为一页一页的代码。子的话有个回调方法，这个方法只是符合我的需求，你可以删掉的。代码注释很全，相信大侠们肯定都能够看懂的。
各位发现什么错误或者有什么更好的方法一定要招呼我一声呀
这篇关于swiper滑动实现幻灯片功能及swiper animate的动画特效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
