swiper H5 滑屏插件推薦
發現一款比較好用的移動端滑屏工具，這裡推薦大家使用。
該工具支援手機&ＰＣ端螢幕滑動及圖檔切換，同時該插件還提供很多滑動及切換特效。并且有詳細的ＡＰＩ及豐富執行個體。
這款工具是： Siwper , 參考網址：http://www.swiper.com.cn
這裡不再對該插件工具做過多介紹，可以直接通路上方網站産看相關執行個體及ＡＰＩ。
這裡附上個人編寫的基于該JS插件的小執行個體。需要可直接下載下傳參考。
頁面代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width，initial-scale=1.0">
<title>垂直滑動展示H5</title>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<link rel="stylesheet" href="css/swiper.min.css" target="_blank" rel="external nofollow" >
<script>
$（
function（） {
var pros = $（ ".product-box"），
mySwiper = new Swiper（ '.swiper-container'， {
direction: "vertical"，
onSlideChangeEnd: function（ swiper） {
swiper.slides.find（ ".product-box"）.removeClass（ "anim"）;
if（ swiper.slides.length > mySwiper.activeIndex） {
pros.eq（ mySwiper.activeIndex）.addClass（ "anim"）;
}
}
}）;
}）
</script>
<style>
html，body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue， Helvetica， Arial， sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
margin: 0px auto;
}
.swiper-slide {
position: relative;
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-slide img {
border: none;
height: 100%;
width: 100%;
}
.swiper-slide img.img-bg {
position: relative;
left: 0;
top: 0;
z-index: 1;
}
.swiper-slide .product-box {
transform-origin: center;
-webkit-transform: scale（0）;
-moz-transform: scale（0）;
-o-transform: scale（0）;
-ms-transform: scale（0）;
transform: scale（0）;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
position: absolute;
left: 50%;
top: 50%;
height: 40px;
line-height: 40px;
width: 280px;
margin-left: -140px;
height: -20px;
z-index: 2;
border: 1px solid #FF8604;
border-radius: 8px;
}
.swiper-slide .product-box h3 {
display: block;
width: 100%;
font-size: 18px;
margin: 0;
padding: 0;
}
.swiper-wrapper .swiper-slide:nth-child（even） {
background: #FF8604;
}
.swiper-slide .anim {
-ms-transform: scale（1）;
-o-transform: scale（1）;
-moz-transform: scale（1）;
-webkit-transform: scale（1）;
transform: scale（1）;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-bg" src="images/zhiling1.jpg">
<div class="product-box">
<h3>蘋果7 ￥6666 預購速重</h3>
</div>
</div>
<div class="swiper-slide"><img class="img-bg" src="images/zhiling2.jpg">
<div class="product-box">
<h3>蘋果7 ￥6666 預購速重</h3>
</div>
</div>
<div class="swiper-slide"><img class="img-bg" src="images/zhiling3.jpg">
<div class="product-box">
<h3>蘋果7 ￥6666 預購速重</h3>
</div>
</div>
<div class="swiper-slide"><img class="img-bg" src="images/zhiling4.jpg">
<div class="product-box">
<h3>蘋果7 ￥6666 預購速重</h3>
</div>
</div>
<div class="swiper-slide"><img class="img-bg" src="images/zhiling5.jpg"></div>
<div class="swiper-slide"><img class="img-bg" src="images/zhiling6.jpg"></div>
<div class="swiper-slide"><img class="img-bg" src="images/zhiling7.jpg"></div>
<div class="swiper-slide"><img class="img-bg" src="images/zhiling5.jpg"></div>
<div class="swiper-slide"><img class="img-bg" src="images/zhiling4.jpg"></div>
<div class="swiper-slide"><img class="img-bg" src="images/zhiling2.jpg"></div>
</div>
</div>
</body>
</html>
相關js 及css 可到：http://www.swiper.com.cn 下載下傳
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)