移动端html5怎么实现原生tab滑动切换

　我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目，我们说的TAB一般由导航条和TAB对应的内容组成，切换导航条上的标签同时标签对应的内容也会跟着切换。

我们准备一个TAB导航#pagenavi，里面包含TAB导航要切换的四个导航按钮，然后是切换的主体内容#slider，这里应该放置四个li与导航按钮对应，内容自定义。

由于是移动端应用，我们加载zepto.js，zepto就是体积小的jquery。然后需要加载触屏滑动插件touchslider.js。

接下来我们就直接调用TouchSlider，通过设置绑定tab，滑动方向、速度、时间等信息实现内容切换，请看详细代码：

<script type="text/javascript">

var page='pagenavi'

var mslide='slider'

var mtitle='emtitle'

arrdiv = 'arrdiv'

var as=document.getElementById(page).getElementsByTagName('a')

var tt=new TouchSlider({id:mslide,'auto':'-1',fx:'ease-out',direction:'left',speed:600,timeout:5000,'before':function(index){

var as=document.getElementById(this.page).getElementsByTagName('a')

as[this.p].className=''

as[index].className='active'

this.p=index

var txt=as[index].innerText

$("#"+this.page).parent().find('.emtitle').text(txt)

var txturl=as[index].getAttribute('href')

var turl=txturl.split('#')

$("#"+this.page).parent().find('.go_btn').attr('href',turl[1])

}})

tt.page = page

tt.p = 0

for(var i=0i<as.lengthi++){

(function(){

var j=i

as[j].tt = tt

as[j].onclick=function(){

this.tt.slide(j)

return false

}

})()

}

</script>

使用格式：

<meta http-equiv="Page-Enter" content="RevealTrans(duration=5,Transitionv=11)">

duration=时间

Transitionv=方式

说明：duration为页面切换的时间长度，3.000表示3秒钟，一般可以直接输入3便可；transition为切换效果，从1-23共22种不同的切换效果，其中23为随机效果。

效果 　Content 　Transitionv

盒状收缩 RevealTrans 0　

盒状展开　 RevealTrans 1

圆形收缩　 RevealTrans 2　

圆形展开 RevealTrans 3

向上擦除 RevealTrans 4

向下擦除 RevealTrans 5

向左擦除 RevealTrans 6

向右擦除 RevealTrans 7

垂直百页窗 RevealTrans 8

水平百页窗 RevealTrans 9

横向棋盘式 RevealTrans 10

纵向棋盘式 RevealTrans 11

溶解 RevealTrans 12

左右向中部收缩 RevealTrans 13

中部向左右展开 RevealTrans 14

上下向中部收缩 RevealTrans 15

中部向上下展开 RevealTrans 16

阶梯状向左下展开 RevealTrans 17

阶梯状向左上展开 RevealTrans 18

阶梯状向右下展开 RevealTrans 19

阶梯状向右上展开 RevealTrans 20

随机水平线 RevealTrans 21

随机垂直线 RevealTrans 22

随机 RevealTrans 23

可以放到移动端的html5动画切换效果

默认也可以自动切换

支持鼠标点击拖动、滑动

将head中的样式引入到你的样式表中

将body中需要的代码部分拷贝过去即可

---