H5滚动
小结
1、每个swiper-slide表示一页，swiper-slide外层结构全部负值，swiper-slide里面再构建DIV盒子写每页的内容，
2、style.css样式全部要，main.css里面定义每一页里面的样式，
3、idangerous.swiper.js为拖动JS，调用JS在下面
html结构
<!doctype html>
<meta charset="UTF-8">
<title>2144在线玩</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<script language="javascript" src="http://m.wnwb.com/resources/jquery-1.8.3.js"></script>
<script src="http://m.wnwb.com/resources/idangerous.swiper.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="wrapper swiper-container" style="visibility: visible;">
<!--滚动模块start-->
<div class="main swiper-wrapper" id="slide_page">
<!--滚动第一页-->
<div class="swiper-slide swiper-slide1_bg">
<p>daeakfdjfkeaj</p>
</div>
<!--滚动第二页-->
<div class="swiper-slide swiper-slide2_bg">
<p>daefkdafjldjaldfjfjfjfjfjfjlmlrnvf ldvfkslvdfklszvfdklvn fld</p>
</div>
<!--滚动第三页-->
<div class="swiper-slide swiper-slide3_bg"></div>
<div class="swiper-slide swiper-slide3_bg"></div>
<div class="swiper-slide swiper-slide3_bg"></div>
</div>
<!--滚动模块end-->
<!--右侧滚动页数圈圈显示模块start-->
<div class="pagination"><span class="swiper-pagination-switch"><span class="swiper-pagination-switch"><span class="swiper-pagination-switch"><span class="swiper-pagination-switch"><span class="swiper-pagination-switch"></div>
<!--右侧滚动页数圈圈显示模块end-->
</div>
</body>
</html>
<script language="javascript">
//向上滚动调用
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
paginationClickable: true,
loop:false,
mode: 'vertical',
onSlideClick:function(){
},
onSlideTouch:function(){
}
})
//屏幕适配JS
new function (){
var _self = this ;
_self.width = 640; // 设置默认最大宽度
_self.fontSize = 100; // 默认字体大小
_self.widthProportion = function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
_self.changePage = function (){
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
}
_self.changePage();
window.addEventListener('resize', function (){_self.changePage();}, false );
};
</script>
必须要有的style.css
.swiper-container {
margin:0 auto;
position:relative;
overflow:hidden;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-ms-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
/* Fix of Webkit flickering */
z-index:1;
}
.swiper-wrapper {
position:relative;
width:100%;
-webkit-transition-property:-webkit-transform, left, top;
-webkit-transition-duration:0s;
-webkit-transform:translate3d(0px,0,0);
-webkit-transition-timing-function:ease;
-moz-transition-property:-moz-transform, left, top;
-moz-transition-duration:0s;
-moz-transform:translate3d(0px,0,0);
-moz-transition-timing-function:ease;
-o-transition-property:-o-transform, left, top;
-o-transition-duration:0s;
-o-transform:translate3d(0px,0,0);
-o-transition-timing-function:ease;
-o-transform:translate(0px,0px);
-ms-transition-property:-ms-transform, left, top;
-ms-transition-duration:0s;
-ms-transform:translate3d(0px,0,0);
-ms-transition-timing-function:ease;
transition-property:transform, left, top;
transition-duration:0s;
transform:translate3d(0px,0,0);
transition-timing-function:ease;
}
.swiper-slide {
float: left;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
}
-webkit-text-size-adjust:none;
html,body{-webkit-text-size-adjust:none;}
*{padding:0;margin:0;}
html{
height: 100%;
}
body{
height: 100%;
position: relative;
overflow-x: hidden;
}
.wrapper {
max-width: 640px;
margin: 0 auto;
/*height:100%;重要*/
height:100%;
visibility:hidden;
}
.main {
position:relative;
/*width:100%;height:100%;可删除*/
/*width:100%;
height:100%;*/
}
.pagination {
position: absolute;
z-index: 20;
right: 20px;
top: 41%;
text-align:center;
margin:0 auto;
}
.swiper-pagination-switch {
display: block;
width: 9px;
height:9px;
background: url(http://m.wnwb.com/resources/round.png) no-repeat 50% 50%;
margin:14px auto;
}
.swiper-active-switch {
width:13px;
height:13px;
background: url(http://m.wnwb.com/resources/round_active.png) no-repeat 50% 50%;
}
.swiper-slide {width:100%;}
主要的样式main.css
html{font-size:625%;}
/*背景*/
.swiper-slide1_bg{background:url(../images/1.jpg) no-repeat;background-size:100% 100%;}
.swiper-slide2_bg{background:url(../images/2.jpg) no-repeat;background-size:100% 100%;}
.swiper-slide3_bg{background:url(../images/3.jpg) no-repeat;background-size:100% 100%;}
/*main css*/
.swiper-slide p{font-size:.4rem;padding:.1rem;}
demo
