您的位置：首页 > Web前端 > HTML5

swiper H5 滑屏插件推荐

2016-03-06 15:31 561 查看

发现一款比较好用的移动端滑屏工具，这里推荐大家使用。

该工具支持手机&ＰＣ端屏幕滑动及图片切换，同时该插件还提供很多滑动及切换特效。并且有详细的ＡＰＩ及丰富实例。

　　这款工具是：ｓｉｗｐｅｒ．　参考网址：http://www.swiper.com.cn

这里不再对该插件工具做过多介绍，可以直接访问上方网站产看相关实例及ＡＰＩ。

这里附上个人编写的基于该ｊｓ插件的小实例。需要可直接下载参考。

页面代码如下：

<!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">
<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: cent
ab2a
er;
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　下载

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航