在这篇文章中，我实现了一个基本的选项卡功能：请猛击后面的链接>> [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件.
还缺少两个常用的切换（自动切换与透明度渐变），当然有朋友会说，还有左右，上下等等，这些动画会放在焦点图（幻灯片）插件系列.
(自动切换，停止控制，透明度渐变 ) 效果预览：
自动切换的实现：
这个思路很简单，开启定时器，让选项卡的索引+1，加到4的时候（选项卡的长度）从0开始
传统做法：
index = 0
index++
if ( index == 4 ) {
index = 0
}
小技巧（估计很多人都没有用过）：
var i = ( index + 1 ) % 4
index为当前选中的选项卡 索引
当index = 0，他下一张就是1, 通过上面的取余操作，i = 1
当index = 3，他下一张就是0, 通过上面的取余操作，i = 0
这种方法不需要判断边界，只需要一句代码。在实际开发中，把那个4替换成选项卡的长度
好了，关键的思路和技巧有了，我们开始拼接框架了:
var defaults = {
contentClass : 'tab-content',
navClass : 'tab-nav',
activeClass : 'active',
triggerElements : '*',
activeIndex : 0,
evType : 'click',
effect : 'none',
auto : false,
delay : 3000,
duration : 1000
};
defaults参数，增加几个配置：
effect: none(没有特效) / fade( 透明度切换 )
auto: false(不会自动切换) / true ( 开启自动切换 )
delay : 多少时间 切换一个选项卡
duration: 透明度开启，这个才会用到，表示，多长时间内 完成透明度的切换
if ( options.effect == 'fade' ) {
tabContent.style.position = 'relative';
for( var i = 0; i < tabContentEle.length; i++ ) {
tabContentEle[i].style.position = 'absolute';
}
tabContentEle[opt.activeIndex].style.zIndex = _contentLen + 1;
opt.delay += opt.duration;
}
当开启透明度变化的时候，把选项卡元素设置成定位方式，当前选中的选项卡，层级为最高!!! ( 如果不是最高层级，那么默认是最后一个选项卡在最上面，所以 “内容4” 就会在最上层，显然不是我们想要的结果）层级+定位 这一招也很常用，经常用来做显示隐藏，和透明度变化.
根据opt配置，判断是否开启了auto自动切换功能
//是否自动播放
if ( opt.auto ) {
for( var i = 0 ; i < tabNavEle.length; i++ ){
tabNavEle[i].index = i;
tabNavEle[i].onmouseover = function(){
_api.stop();
_api.setIndex( this.index );
};
tabNavEle[i].onmouseout = function(){
_api.start();
_api.setIndex( this.index );
};
}
_api.start();
}
如果开启了，做两件事情：
1，调用start()函数，让索引+1
2，选项卡导航部分，添加事件控制 自动播放的暂停和开始
start与stop方法？
_api.stop = function(){
timer && clearInterval( timer );
};
_api.start = function(){
_api.stop();
timer = setInterval( function(){
_api.next();
}, opt.delay );
};
调用next方法，你应该猜得到next方法做的事情就是索引+1 吧
_api.next = function(){
var i = ( _index + 1 ) % _contentLen;
_api.setIndex( i );
};
索引+1之后，再切换选项卡
最后在setIndex方法：增加透明度变化
if ( _index != index ) {
tabContentEle[_index].style.zIndex = _contentLen + 1;
for (var i = 0; i < tabContentEle.length; i++) {
if (i != _index) {
tabContentEle[i].style.zIndex = ( index + _contentLen - ( i + 1 ) ) % _contentLen + 1;
tabContentEle[i].style.opacity = 1;
}
}
animate(tabContentEle[_index], {'opacity': 0}, function () {
tabContentEle[_index].style.zIndex = ( index + _contentLen - ( _index + 1 ) ) % _contentLen + 1;
_index = index;
});
}
完整的js代码有220行：
/**
* Created by ghostwu(吴华).
*/
(function(){
var G = function( selectors, context ){
return new G.fn.init( selectors, context );
}
G.fn = G.prototype = {
length : 0,
constructor : G,
size : function(){
return this.length;
},
init : function( selector, context ){
this.length = 0;
context = context || document;
if ( selector.indexOf( '#' ) == 0 ){
this[0] = document.getElementById( selector.substring( 1 ) );
this.length = 1;
}else {
var aNode = context.querySelectorAll( selector );
for( var i = 0, len = aNode.length; i < len; i++ ) {
this[i] = aNode[i];
}
this.length = len;
}
this.selector = selector;
this.context = context;
return this;
}
} G.fn.init.prototype = G.fn;
G.extend = G.fn.extend = function () {
var i = 1,
len = arguments.length,
dst = arguments[0],
j;
if (dst.length === undefined) {
dst.length = 0;
}
if (i == len) {
dst = this;
i--;
}
for (; i < len; i++) {
for (j in arguments[i]) {
dst[j] = arguments[i][j];
dst.length++;
}
}
return dst;
}; function css(obj, attr, value) {
if (arguments.length == 3) {
obj.style[attr] = value;
} else {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
} function animate(obj, attr, fn) {
clearInterval(obj.timer);
var cur = 0;
var target = 0;
var speed = 0;
var start = new Date().getTime();//起始时间
obj.timer = setInterval(function () {
var bFlag = true;
for (var key in attr) {
if (key == 'opacity') {
cur = css(obj, 'opacity') * 100;
} else {
cur = parseInt(css(obj, key));
}
target = attr[key];
speed = ( target - cur ) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != target) {
bFlag = false;
if (key == 'opacity') {
obj.style.opacity = ( cur + speed ) / 100;
obj.style.filter = "alpha(opacity:" + ( cur + speed ) + ")";
} else {
obj.style[key] = cur + speed + "px";
}
}
}
if (bFlag) {
var end = new Date().getTime();//结束时间
console.log( '总计:', ( end - start ) );
clearInterval(obj.timer);
fn && fn.call(obj);
}
}, 30 );
} G.fn.tabs = function( options ){
options = options || {};
var defaults = {
contentClass : 'tab-content',
navClass : 'tab-nav',
activeClass : 'active',
triggerElements : '*',
activeIndex : 0,
evType : 'click',
effect : 'none',
auto : false,
delay : 3000,
duration : 1000
}; var opt = G.extend( {}, defaults, options ); var tabContent = this[0].querySelector( "." + opt.contentClass );
var tabContentEle = tabContent.children;
var tabNavEle = this[0].querySelectorAll( "." + opt.navClass + '>' + opt.triggerElements ); var _contentLen = tabContentEle.length; //选项卡个数
var _index = opt.activeIndex;
var timer = null; if ( options.effect == 'fade' ) {
tabContent.style.position = 'relative';
for( var i = 0; i < tabContentEle.length; i++ ) {
tabContentEle[i].style.position = 'absolute';
}
tabContentEle[opt.activeIndex].style.zIndex = _contentLen + 1;
opt.delay += opt.duration;
} var _api = {}; _api.next = function(){
var i = ( _index + 1 ) % _contentLen;
_api.setIndex( i );
}; _api.stop = function(){
timer && clearInterval( timer );
}; _api.start = function(){
_api.stop();
timer = setInterval( function(){
_api.next();
}, opt.delay );
}; _api.setIndex = function( index ){
//当前标签加上active样式，其余标签删除active样式
for ( var i = 0; i < _contentLen; i++ ) {
if ( tabNavEle[i].classList.contains( 'active' ) ) {
tabNavEle[i].classList.remove('active');
}
}
tabNavEle[index].classList.add( 'active' );
switch ( opt.effect ){
case 'fade':
if ( _index != index ) {
tabContentEle[_index].style.zIndex = _contentLen + 1;
for (var i = 0; i < tabContentEle.length; i++) {
if (i != _index) {
tabContentEle[i].style.zIndex = ( index + _contentLen - ( i + 1 ) ) % _contentLen + 1;
tabContentEle[i].style.opacity = 1;
}
}
animate(tabContentEle[_index], {'opacity': 0}, function () {
tabContentEle[_index].style.zIndex = ( index + _contentLen - ( _index + 1 ) ) % _contentLen + 1;
_index = index;
});
}
break;
default:
for ( var i = 0; i < _contentLen; i++ ) {
tabContentEle[i].style.display = 'none';
}
tabContentEle[index].style.display = 'block';
_index = index;
}
} _api.setIndex( _index ); //默认的选项卡 //所有的标签绑定事件
for( var i = 0, len = tabNavEle.length; i < len; i++ ) {
tabNavEle[i].index = i;
tabNavEle[i].addEventListener( opt.evType, function(){
var i = this.index;
_api.setIndex( i );
}, false );
} //是否自动播放
if ( opt.auto ) {
for( var i = 0 ; i < tabNavEle.length; i++ ){
tabNavEle[i].index = i;
tabNavEle[i].onmouseover = function(){
_api.stop();
_api.setIndex( this.index );
};
tabNavEle[i].onmouseout = function(){
_api.start();
_api.setIndex( this.index );
};
}
_api.start();
} return this;
} var $ = function( selectors, context ){
return G( selectors, context );
}
window.$ = $;
})();