jquery,js实现手机端全屏轮播图
使用了swiper插件,可手动滑动切换也可自动切换
效果图
css代码
只是作为参考,可以根据你自己的需求去改,这里我用的是上下两张背景图,图自行修改
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
//兼容浏览器
.swiper-slide {
text-align: center;
background: #fff;
position: relative;
/* 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-slide1 {
background-image: url(../assets/down_bg_h@3x.png), url(../assets/down_bg_g@3x.png);
background-repeat: no-repeat;
background-position: bottom, 0 -9rem;
background-size: 38rem 34rem, 38rem 8