HTML5是一種用于創建Web頁面和Web應用程序的核心技術。移動設備的普及讓我們更加注重頁面在手機端的顯示效果。本文將介紹如何使用HTML5實現手機端頁面的滑動效果。 首先，在頁面的head標簽中引入以下代碼：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

其中，viewport標簽是用來設置頁面在移動設備上的顯示效果，initial-scale=1.0表示將頁面默認縮放比例設置為100%。 接下來，我們需要使用CSS3中的transform和transition屬性實現頁面的滑動效果。以下代碼實現了在頁面內滑動效果的功能：

html,body{
height: 100%;
overflow: hidden;
}
#container{
width: 100%;
height: 100%;
position: relative;
-webkit-transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.page{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.page:nth-child(1){background-color: red;}
.page:nth-child(2){background-color: blue;}
.page:nth-child(3){background-color: green;}

以上代碼中，#container代表滑動的容器，.page代表每個滑動頁面。其中，使用了translate3d屬性來實現頁面的滑動效果。 最后，我們需要綁定JavaScript事件來實現頁面的滑動，以下是具體實現代碼：

var container = document.getElementById('container');
var pages = document.querySelectorAll('.page');
var len = pages.length;
var initTop = 0;
var currIndex = 0;
//手指觸摸屏幕
var touchStart = function(e){
initTop = e.touches[0].pageY;
};
//手指離開屏幕
var touchEnd = function(e){
var distance = e.changedTouches[0].pageY - initTop;
//判斷上滑或下滑
if(distance >50){//下滑
currIndex--;
if(currIndex< 0){
currIndex = 0;
}
}else if(distance< -50){//上滑
currIndex++;
if(currIndex >len-1){
currIndex = len-1;
}
}
container.style.transform = 'translate3d(0,-'+(currIndex*100)+'%,0)';
};
//綁定事件
container.addEventListener('touchstart', touchStart);
container.addEventListener('touchend', touchEnd);

以上代碼中，我們使用touchstart和touchend綁定了滑動事件，通過計算手指滑動的距離來確定滑動地方，并利用transform屬性完成滑動效果。 最后，我們把以上代碼整合在一起即可在移動設備上實現頁面的滑動效果。