怎麼實作手機滑動實作幻燈效果呢？目前網上有很多插件可以實作，本人選了一款非常不錯的插件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" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<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" target="_blank" rel="external nofollow" >
<!--手觸滑動-->
<link rel="stylesheet" type="text/css" href="assets/lib/css/swiper3.06.min.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >
<!--動畫庫CSS-->
<link rel="stylesheet" type="text/css" href="assets/lib/css/animate.min.css" target="_blank" rel="external nofollow" >
<!--向上提示箭頭樣式-->
<span style="font-size:14px;"> 這個樣式是自己寫的</span>
<link rel="stylesheet" type="text/css" href="assets/css/huanDeng/upJianTou.css" target="_blank" rel="external nofollow" >
<!--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初始化聲明了，第一個是父，第二個是子，父裡面有動畫效果顯示為一頁一頁的代碼。子的話有個回調方法，這個方法隻是符合我的需求，你可以删掉的。代碼注釋很全，相信大俠們肯定都能夠看懂的。
各位發現什麼錯誤或者有什麼更好的方法一定要招呼我一聲呀
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)