引擎： cocos2d-js 3.0
这只是一个简单的，循环的版本，后期再给大家呈现实时滑动的版本。
为了方便对齐坐标，所以这个控件结合了cocos studio1.6的编辑器。
编辑器的编辑效果如下：
ClipPanel是一个大小为选择区域的裁剪Panel（设置裁剪）。
Image_BackGround是左右黑色渐变的背景，位于图片上层。
Image_0到Image_3是4个基本的移动对象。由于要实现切换的效果，最少需要用到的精灵个数为4个。所以为了最优的性能，我们用4个精灵来模拟。
Label_Tile是上方的标题
Btn_Right和Btn_Left是左右的按钮，用来切换
Btn_Panel是大小同精灵一样的Panel，用来点击选择进入哪一个场景。（切换到相应的地方后，总得要确定选择吧）
由于最初我们设计是循环的控件，因此默认正中间的是第一个对象，左边是列表的最后一个对象，向左边数第二个是倒数第二个对象，右边是第二个对象。如下图：
这里的Image_2在游戏中是看不见的，被裁剪了。
提问：也有朋友觉得这样做不觉得麻烦吗，我列表中有多少个就创建多少个，这样管理不更直接，更简单吗。
我答：如果说需要切换的列表有100个，甚至100个以上的对象怎么破？
接着，我们知道了编辑器的操作后，再来看实际的带代码：
var SwitchTable = cc.Layer.extend({
_curIndex:null,_list:null,_spriteList:null,_originPosition:null,_root:null,_objList:null,_isCanMove:true,// 设定操作间隔
ctor: function(json){
this._super();
this._curIndex = 0;
this._list = [];
this._originPosition = [];
this._root = ccs.uiReader.widgetFromJsonFile(json);
this.addChild(this._root);
for(var i = 0; i < 4; i++){
var sprite = ccui.helper.seekWidgetByName(this._root,"Image_"+i);
this._originPosition.push(sprite.getPosition());
this._list.push(sprite);
}
// ini button
var rightBtn = ccui.helper.seekWidgetByName(this._root,"Btn_Right");
rightBtn.addTouchEventListener(this._touchEvent,this);
var leftBtn = ccui.helper.seekWidgetByName(this._root,"Btn_Left");
leftBtn.addTouchEventListener(this._touchEvent,this);
var panelBtn = ccui.helper.seekWidgetByName(this._root,"Btn_Panel");
panelBtn.addTouchEventListener(this._clicked,this);
this._labTitle = ccui.helper.seekWidgetByName(this._root,"Label_Title");
},initWithObjList: function (objList) {
this._objList = objList;
// 清空目前的Sprite，切换其他ObjList
this._clear();
// 根据列表放置sprite
var length = objList.length;
for( var i = 0; i < 2; i++){ // 头两个
if(objList[i]){
this._list[i].loadTexture(objList[i].imgName);
}
}
var listLength = this._list.length;
for( var i = length - 1; i >= length - 2; i--){ // 尾两个
if(objList[i]){
this._list[listLength-1].loadTexture(objList[i].imgName);
listLength = listLength - 1;
}
}
// 个数处理，如果为1,2，3时
if(length == 1){
this._list[1].setVisible(false);
this._list[2].setVisible(false);
this._list[3].setVisible(false);
}else if( length == 2){
this._list[2].setVisible(false);
this._list[3].setVisible(false);
}else if( length == 3){
this._list[2].setVisible(false);
}
this._curIndex = 0;
this._labTitle.setString(this._objList[this._curIndex].titleName);
},_scroll: function(direction){
if(!this._isCanMove) return;
var length = this._objList.length;
if(length <= 1 ) return; // 不足长度是无法移动
if(direction == 0){
if(length == 2 && this._curIndex == 1) return;
if(length == 3 && this._curIndex == 1) return;
this._curIndex = (this._curIndex + 1) >= length ? 0 : this._curIndex + 1;
var index = this._curIndex + 1 >= this._objList.length ? 0 : this._curIndex + 1;
if(this._objList[index]){
this._list[2].loadTexture(this._objList[index].imgName);
}
this._moveToLeft();
}else{
if(length == 2 && this._curIndex == 0) return;
if(length == 3 && this._curIndex == 2) return;
this._curIndex = (this._curIndex - 1) < 0 ? length - 1 : this._curIndex - 1;
this._moveToRight();
}
this._isCanMove = false;
this.runAction(cc.sequence(cc.delayTime(0.3),cc.callFunc(function(){
this._isCanMove = true;
if(direction == 0){
}else{
var index = this._curIndex - 2 < 0 ? this._objList.length + (this._curIndex - 2) : this._curIndex - 2;
if(this._objList[index]){
this._list[2].loadTexture(this._objList[index].imgName);
}
}
},this)));
this._labTitle.setString(this._objList[this._curIndex].titleName);
},_moveToRight: function(){
var time = 0.3;
this._list[0].runAction(cc.spawn(cc.moveTo(time,this._originPosition[1]),cc.scaleTo(time,0.8)));
this._list[1].runAction(cc.moveBy(time,cc.p(this._list[2].getContentSize().width + 5,0)));
this._list[2].setPosition(this._originPosition[2]);
this._list[2].runAction(cc.moveTo(time,this._originPosition[3]));
this._list[3].runAction(cc.spawn(cc.moveTo(time,this._originPosition[0]),1)));
var tempSp = this._list[0];
this._list[0] = this._list[3];
this._list[3] = this._list[2];
this._list[2] = this._list[1];
this._list[1] = tempSp;
},_moveToLeft: function(){
var time = 0.3;
this._list[0].runAction(cc.spawn(cc.moveTo(time,this._originPosition[3]),0.8)));
this._list[3].runAction(cc.moveBy(time,cc.p(-this._list[2].getContentSize().width + 5,0)));
this._list[2].setPosition(cc.p(this._originPosition[1].x + this._list[2].getContentSize().width,this._originPosition[1].y));
this._list[2].runAction(cc.moveTo(time,this._originPosition[1]));
this._list[1].runAction(cc.spawn(cc.moveTo(time,1)));
var tempSp = this._list[0];
this._list[0] = this._list[1];
this._list[1] = this._list[2];
this._list[2] = this._list[3];
this._list[3] = tempSp;
},_clear: function(){
//this._list[2].setVisible(false);
this._curIndex = 0;
},_touchEvent: function (sender,type) {
switch (type) {
case ccui.Widget.TOUCH_ENDED:
var tag = sender.getTag();
this._scroll(tag);
break;
default:
break;
}
},_clicked: function (sender,type) {
/*if (type == ccui.Widget.TOUCH_ENDED) { window.open(....); }*/
}
});
（1）左右按钮通过tag的设置来区分
（2）由于1~3个个数的时候数量太少，无法支持循环，所有上方判断。
（3）SwitchTable名字是我随便取的^ ^
下周会把一个通用的、跟随手指滑动的控件给大家贴出来。
