首先非常感谢网友Adam‘的无私分享，此选项卡js特效是将原来写的一个原创选项卡Jquery插件改成用自己写的一个JS框架Aui-core实现的，代码非常简洁，可支持事件的动态绑定，带左右滑动控制按钮，功能非常酷。
第一步：引入Aui-core库JS文件
第二步：Aui-core代码如下：
Aui.ready(function() {
var oWrap = Aui("#demo"),
oTabs = oWrap.find("li"),
oTabsLen = oTabs.length,
oMove = Aui("#tabsMove"),
nWidth = oMove.children().eq(0).width(),
iTimer = null,
oPrev = Aui("#tabsPrev"),
oNext = Aui("#tabsNext"),
IDX = 0;
oTabs.bind("click",
function() {
var _this = Aui(this);
IDX = _this.index();
_this.addClass("curr").siblings().removeClass("curr");
oMove.stop().fx({
left: -nWidth * IDX
},
200);
});
oPrev.bind("click",
function() {
if (IDX > 0) {
IDX -= 1;
} else {
IDX = oTabsLen - 1;
};
oMove.stop().fx({
left: -nWidth * IDX
},
200);
oTabs.eq(IDX).addClass("curr").siblings().removeClass("curr");
return false;
});
oNext.bind("click",
function() {
if (IDX < oTabsLen - 1) {
IDX += 1;
} else {
IDX = 0;
};
oMove.stop().fx({
left: -nWidth * IDX
},
200);
oTabs.eq(IDX).addClass("curr").siblings().removeClass("curr");
return false;
});
});
第三步：HTML代码如下：
<div id="demo" class="tabs_wrap">
<ul class="tabs_list">
<li class="curr">tabs1</li>
<li>tabs2</li>
<li>tabs3</li>
<li>tabs4</li>
</ul>
<div class="tabs_con">
<div class="tabs_con_wrap">
<div id="tabsMove" class="tabs_move">
<div> tabs1 </div>
<div> tabs2 </div>
<div> tabs3 </div>
<div> tabs4 </div>
</div>
</div>
</div>
<a id="tabsPrev"></a> <a id="tabsNext"></a>
</div>
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
Aui-core 选项卡 js特效 网友Adam’ 滑动插件