平常做移动端会用到tab选项卡，这和PC端有些区别，移动端是触摸滑动切换，PC端是点击、移入切换。

　　这里滑动切换就是一个移动端事件的应用，这里主要用到的触摸事件：touchstart、touchmove、touchend。

　　和做其他的效果一样，先有html结构，css样式修饰，再写JS代码。

　　html:

<div class="mtabs" id="tabs">

    <ul class="mhead">

        <li>tab1</li>

        <li>tab2</li>

        <li>tab3</li>

    </ul>

    <div class="mcontent">

        <ul>

            <li>tab1内容内容内容内容</li>

            <li>tab1内容内容内容内容</li>

            <li>tab1内容内容内容内容</li>

            <li>tab1内容内容内容内容</li>

            <li>tab1内容内容内容内容</li>

        </ul>

        <ul>

            <li>tab2内容内容内容内容</li>

            <li>tab2内容内容内容内容</li>

            <li>tab2内容内容内容内容</li>

            <li>tab2内容内容内容内容</li>

            <li>tab2内容内容内容内容</li>

        </ul>

        <ul>

            <li>tab3内容内容内容内容</li>

            <li>tab3内容内容内容内容</li>

            <li>tab3内容内容内容内容</li>

            <li>tab3内容内容内容内容</li>

            <li>tab3内容内容内容内容</li>

        </ul>

    </div>

</div><!-- End .mtabs -->

　　css:

body,div,ul,li{

    margin:;

    padding:;

}

ul,li {

    list-style:none;

}

body {

    font-size:100%;

    font-family:Helvetica,STHeiti,Droid Sans Fallback;

}

.mtabs {

    width:100%;

    overflow:hidden;

}

.mhead {

    height:38px;

    border-top:2px solid #9ac7ed;

    background:#ECF2F6;

    -webkit-tap-highlight-color:rgba(0,0,0,0);

}

.mhead li {

    position:relative;

    font-size:1.125em;

    text-align:center;

    float:left;

    width:64px;

    height:38px;

    line-height:38px;

    color:#2a70be;

}

.mhead li.current {

    border-top:2px solid #2a70be;

    margin-top:-2px;

    background:#FFF;

    color:#c14545;

}

.mcontent {

    width:100%;

    overflow:hidden;

}

.mcontent ul {

    width:100%;

    float:left;

}

.mcontent li {

    height:35px;

    line-height:35px;

    font-size:1.125em;

    padding:0 10px;

}

　　下面的截图是想要的一个效果预览：

　　下面是实际效果，可以在Chrome的移动模式查看：

　　先贴上JS代码，供参考

/**

 * LBS mTabs

 * Date: 2014-5-10

 * ===================================================

 * opts.mtab 	tabs外围容器/滑动事件对象(一个CSS选择器)

 * opts.mhead 	tabs标题容器/点击对象(一个CSS选择器)

 * opts.mcontent	tabs内容容器/滑动切换对象(一个CSS选择器)

 * opts.index 	tabs索引(默认0) 指定显示哪个索引的标题、内容

 * opts.current  tabs当前项的类名(默认current)

 * ===================================================

**/

;(function(){

window.mTabs = function(opts){

	if(typeof opts === undefined) return;

　　　　 //取得tabs外围容器、标题容器、内容容器

	this.mtab = document.querySelector(opts.mtab);

	this.mhead = document.querySelector(opts.mhead);

	this.mcontent = document.querySelector(opts.mcontent);

　　　　 //取得标题容器内选项集合、内容容器内容集合

	this.mheads = this.mhead.children;

	this.mcontents = this.mcontent.children;

	this.length = this.mheads.length;

	if(this.length < 1) return;

	if(opts.index > this.length-1) opts.index = this.length-1;

	this.index = this.oIndex = opts.index || 0;

	this.current = opts.current || 'current'; //当前活动选项类名

	this.touch = {};//自定义一个对象 用来保存手指触摸相关信息

	this.init();

}

mTabs.prototype = {

	init: function(opts){

		this.set();

		this.initset();

		this.bind();

	},

	initset: function(){

		for(var i = 0; i < this.length; i++){

			this.mheads[i].index = i;//设置了一个属性 方便点击时判断是点了哪一项

			this.mheads[i].className = this.mheads[i].className.replace(this.current,'');

			this.mcontents[i].className = this.mcontents[i].className.replace(this.current,'');

		}//初始化设置、先清空手动加在标题或内容HTML标签的当前类名（this.current）、再设置哪一项为当前选项并设置类名

		this.mheads[this.index].className += ' '+this.current;

		this.mcontents[this.index].className += ' '+this.current;
　　　　　　　　　 //对应的内容要显示在可视区域

		//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";

		//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";

	},

	set: function(){//获取浏览器的视口宽度、并设置内容容器的宽度、每一项内容区域的宽度，屏幕旋转，浏览器窗口变换会再次设置这些值

		this.width =  document.documentElement.clientWidth || document.body.clientWidth;

		this.mcontent.style.width = this.length * this.width + 'px';

		for(var i = 0; i < this.length; i++) this.mcontents[i].style.width = this.width + 'px';//调整在可视区域显示的内容项

		//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";

		this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";

	},

	bind: function(){
　　　　　　　　　//绑定各种事件

		var _this = this;

		this.mtab.addEventListener("touchstart",function(e){

			_this.touchStart(e);

		}, false);

		this.mtab.addEventListener("touchmove",function(e){

			_this.touchMove(e);

		}, false);

		this.mtab.addEventListener("touchend",function(e){

			_this.touchEnd(e);

		}, false);

		this.mtab.addEventListener("touchcancel",function(e){

			_this.touchEnd(e);

		}, false);

		this.mhead.addEventListener("click",function(e){

			_this.touchClick(e);

		}, false);

		this.mcontent.addEventListener('webkitTransitionEnd',function(){

			_this.transitionEnd();

		}, false);

		window.addEventListener("resize", function(){

			setTimeout(function(){

				_this.set();

			},100);

		}, false);

		window.addEventListener("orientationchange",function(){

			setTimeout(function(){

				_this.set();

			},100);

		}, false);

	},

	touchStart: function(e){

		this.touch.x = e.touches[0].pageX;

		this.touch.y = e.touches[0].pageY;

		this.touch.time = Date.now();

		this.touch.disX = 0;

		this.touch.disY = 0;

		this.touch.fixed = ''; //重要 这里采用了判断是滚动页面行为、还是切换选项行为 如果是滚动页面就在滑动时只滚动页面 相应的切换选项就切换不会滚动页面

	},

	touchMove: function(e){

		if(this.touch.fixed === 'up') return;

		e.stopPropagation();

		if(e.touches.length > 1 || e.scale && e.scale !== 1) return;

		this.touch.disX = e.touches[0].pageX - this.touch.x;

		this.touch.disY = e.touches[0].pageY - this.touch.y;

		if(this.touch.fixed === ''){//行为判断 采用这种方式 主要解决手指按下移动(左上、右上)时滑动切换和滚动页面同时执行的问题

			if( Math.abs(this.touch.disY) > Math.abs(this.touch.disX) ){

				this.touch.fixed = 'up';

			}else{

				this.touch.fixed = 'left';

			}

		}

		if(this.touch.fixed === 'left'){

			e.preventDefault();

			if( (this.index === 0 && this.touch.disX > 0) || (this.index === this.length-1 && this.touch.disX < 0) ) this.touch.disX /= 4; //在 第一项向右滑动、最后一项向左滑动 时

			//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + ( this.touch.disX - this.index * this.width ) + "px)";

			this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + ( this.touch.disX - this.index * this.width ) + "px,0,0)";

		}

	},

	touchEnd: function(e){

		if(this.touch.fixed === 'left'){

			var _this = this, X = Math.abs(this.touch.disX);

			this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 100ms';

			if( (Date.now() - this.touch.time > 100 && X > 10) || X > this.width/2 ){

				this.touch.time = Date.now();

				this.touch.disX > 0 ? this.index-- : this.index++;

				this.index < 0 && (this.index = 0);

				this.index > this.length - 1 && (this.index = this.length - 1);

				if(this.index === this.oIndex) this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 300ms';

				if(this.index !== this.oIndex) this.replace();

			}

			//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";

			this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";

		}

	},

	transitionEnd: function(){

		this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 0ms';

	},

	touchClick: function(e){

		var target = e.target;

		if(target.nodeType === 1 && target.index !== undefined){

			if(target.index === this.index) return;

			e.preventDefault();

			e.stopPropagation();

			this.index = target.index;

			this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 100ms';

			//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";

			this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";

			this.replace();

		}

	},

	replace: function(){

		this.mheads[this.index].className += ' '+this.current;

		this.mheads[this.oIndex].className = this.mheads[this.oIndex].className.replace(this.current,'').trim();

		this.mcontents[this.index].className += ' '+this.current;

		this.mcontents[this.oIndex].className = this.mcontents[this.oIndex].className.replace(this.current,'').trim();

		this.oIndex = this.index;

	}

}

}());

　　使用方式很简单，如下

document.addEventListener('DOMContentLoaded',function(){

	//use mTabs

	new mTabs({

		mtab: '#tabs',

		mhead: '#tabs .mhead',

		mcontent: '#tabs .mcontent'

	});

	/*new mTabs({

		mtab: '#tabs',

		mhead: '#tabs .mhead',

		mcontent: '#tabs .mcontent',

		index: 1,

		current: 'active'

	});*/

},false);

mtab:

<div class="mtabs" id="tabs">

    //..

</div>

mhead:

<ul class="mhead">

    //..

</ul>

mcontent:

<div class="mcontent">

    //..

</div>　

　　在此说下思路：

　　　　先获得一个tabs容器对象(mtab)，它包含了两个对应的类集合容器，一个是标签栏(mhead)、一个是内容栏(mcontent)，再分别取得类集合容器里面对应的选项mheads、mcontents。

this.mtab = document.querySelector(opts.mtab);

this.mhead = document.querySelector(opts.mhead);

this.mcontent = document.querySelector(opts.mcontent);

this.mheads = this.mhead.children;

this.mcontents = this.mcontent.children;

　　　　获取设备浏览器窗口的宽，并更新内容容器(mcontent)的宽，内容项的宽，一般在页面都会有文档声明 <!DOCTYPE html>　document.documentElement.clientWidth 就能获取浏览器窗口的宽。

this.width =  document.documentElement.clientWidth || document.body.clientWidth;

this.mcontent.style.width = this.length * this.width + 'px';

for(var i = 0; i < this.length; i++) this.mcontents[i].style.width = this.width + 'px';

　　　　在手指触摸按上时(在tabs容器对象上), 获取手指按下时在页面的位置 ( e.touches[0].pageX)。 touchs想象成有几根手指，只需要第一根按下的手指( touches[0] )。初始化了一个行为判断 this.touch.fixed (当在tabs上滑动时是要滚动页面还是要切换选项卡)。

this.touch.x = e.touches[0].pageX;

//..

this.touch.fixed = '';

　　在移动手指时，做出行为的判断。先获得移动的距离(左右方向、上下方向)，根据两个方向的值比较判断是哪种行为。

this.touch.disX = e.touches[0].pageX - this.touch.x;

this.touch.disY = e.touches[0].pageY - this.touch.y;

//..

if(this.touch.fixed === ''){

	if( Math.abs(this.touch.disY) > Math.abs(this.touch.disX) ){

		this.touch.fixed = 'up';

	}else{

		this.touch.fixed = 'left';

	}

}

　　在移动手指时，内容容器(mcontent)也会跟着移动，并且做了在处于第一项和最后一项时的移动限制。

if( (this.index === 0 && this.touch.disX > 0) || (this.index === this.length-1 && this.touch.disX < 0) ) this.touch.disX /= 4; 

　　在手指离开屏幕的时候，做出切换判断，是向左还是向右。在第一项时，不能向左切换，最后一项时不能向右切换。

this.touch.disX > 0 ? this.index-- : this.index++;

this.index < 0 && (this.index = 0);

this.index > this.length - 1 && (this.index = this.length - 1);

　　最后是真正的移动切换，用了css3动画切换，translateX 或者 translate3d .

//this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translateX(" + (-this.index * this.width) + "px)";

this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";

　代码中有个transitionEnd方法，配合webkitTransitionEnd事件在动画切换执行完成时调用。这里调用这个方法是用来清除动画定义的持续时间。

transitionEnd: function(){

	this.mcontent.style.webkitTransition = this.mcontent.style.transition = 'all 0ms';

}

this.mcontent.addEventListener('webkitTransitionEnd',function(){

	_this.transitionEnd();

}, false);

　　点击切换是判断点击了哪一项，在初始设置时已经为每一项保存了索引值(index)，根据对应的索引值，切换选项，更新状态。可以循环绑定点击事件，也可以使用事件委托，这里使用的是事件委托。

this.mheads[i].index = i;

touchClick: function(e){

	var target = e.target;

	if(target.nodeType === 1 && target.index !== undefined){

		//..

		this.index = target.index;

		//..

		this.mcontent.style.webkitTransform = this.mcontent.style.transform = "translate3d(" + (-this.index * this.width) + "px,0,0)";

	}

}

this.mhead.addEventListener("click",function(e){

	_this.touchClick(e);

}, false);

　　tab选项卡主要是获得两组对应的类似集合(一组标签，一组内容)，两个类似数组都有索引值(数组下标)，通过这个索引值，做出对应的切换。获取索引值是tab选项卡的关键，移动web端的选项卡主要是增加了触摸事件操作这个索引值。加上定时器，每隔多少时间增加或者减少这个索引值，自动播放也就完成了。会了tab选项卡也就会了图片的切换，焦点图什么的，原理都是一样。

　　　tab选项卡下载