摘要：
　　tabstools.js是艺灵花费了很长时间手写的一款轮播插件，该插件可实现上百种效果！例如：选项卡轮播、数字轮播、箭头轮播、缩略图轮播、卡盘轮播、常规轮播、多栏滚动、无缝滚动、循环滚动等多种轮播，除此之外，还可实现7种不同的动画效果：显示/隐藏(有过渡)、淡入淡出、伪3D、显示/隐藏、横向滚动(水平)、纵向滚动(垂直)、渐变+缩放。当然，此插件的功能远不止这些......

今天艺灵将给看官们分享一款超帅的轮播插件tabstools.js，这款插件在初期花费了艺灵一周的时候才制作完成，后来又经过多次修改，这周又花了整整3天的时间来优化多栏滚动功能。如今，大功已告成，艺灵将写几篇教程文章方便看官们使用该插件。

一、插件功能及特点

1.动画类型多达7种，如：显示/隐藏(有过渡)、淡入淡出、伪3D、显示/隐藏、横向滚动(水平)、纵向滚动(垂直)、渐变+缩放；
2.常见的轮播一网打尽，如：选项卡轮播、数字轮播、箭头轮播、缩略图轮播、卡盘轮播、常规轮播、多栏滚动、无缝滚动、循环滚动等；
3.通过参数可实现滑过或点击切换轮播、显示/隐藏箭头、是否自动播放等功能；
4.通过改变css可将默认的长条改变成圆点、方块、圆点+数字、方块+数字等28+种；
5.页面只需引入一个tabstools.js插件及一行调用代码即可实现以上功能及后续教程中提及的上百种效果！

心动了吗？若已心动，请看下面的详细教程。

先来预热一下吧。

案例一欣赏

二、选项卡轮播讲解

在讲解前我们先来欣赏一下效果，这有利于后面的教学。

案例二欣赏

看到没，仅一个小小的选项卡轮播就可以写24种不同的展示效果，而这些效果仅需要修改1~3个参数就可以搞定！不信你看

三、实战练习

3.1、html源码

html源码框架

<!--选项卡轮播外框架-->
<div class="ylsj-banner" id="yilingsj-tabs_1">
　<!--目标列表-->
　<div class="gytab-hd">
　　<a class="gh-list on"><!--待填写目标一--></a><a class="gh-list"><!--待填写目标二--></a><a class="gh-list"><!--待填写目标三--></a>
　</div>
　<!--内容列表-->
　<div class="gytab-bdw">
　　<ul class="gytab-bd">
　　　<li class="gb-list bd-on" style="display: block;" >
　　　　<!--待填充内容一-->
　　　</li>
　　　<li class="gb-list" >
　　　　<!--待填充内容二-->
　　　</li>
　　　<li class="gb-list" >
　　　　<!--待填充内容三-->
　　　</li>
　　</ul>
　</div>
　<!--翻页按钮-->
　<div class="gytab-btn">
　　<span class="gy-prev"><!--上一页--></span>
　　<span class="gy-next"><!--下一页--></span>
　</div>
</div>

上面源码中的注释已经说的很清楚明了了，但以防万一，艺灵还是要再上一张对比剖析图供看官琢磨。配图：

3.2、引入tabstools.js插件

引入js文件

<!--引入jquery库，建议1.8版本以上，如果页面中已引入，可忽略此库-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<!--引入tabstools.js插件，注意路径-->
<script type="text/javascript" src="tabstools.js"></script>

引入插件后我们需要来调用插件，这里是重点，需要仔细看哦！

3.3、调用插件

调用插件

$(选择器).tabstools({
　th_list:".gh-list",　　/*目标列表子级*/
　th_parents:".gytab-hd",　　/*目标列表父级*/
　tb_list:".gb-list",　　/*内容列表子级*/
　tb_parents:".gytab-bd",　　/*内容列表父级*/
　tb_box:".gytab-bdw",　　/*内容列表盒子*/
　t_prev:".gy-prev",　　/*翻页按钮，上一页*/
　t_next:".gy-next",　　/*翻页按钮，下一页*/
　t_bd_active:"bd-on",　　/*内容列表激活样式*/
　t_active:"on",　　/*目标列表激活样式*/
　t_mouse:0,　　/*触发方式，0:表示滑过;1:表示点击*/
　t_effect:0,　　/*动画切换类型，0:显示/隐藏(有过渡);1:淡入淡出;2:伪3D;3.显示/隐藏;4:横向滚动(水平);5:纵向滚动(垂直);6.渐变+缩放*/
　t_num:1,　　/*表示每次滚动的个数,t_effect为4或5时生效*/
　t_col:1,　　/*可视区展示的个数,t_effect为4或5时生效*/
　t_width:214,　　/*内容宽度(包括边框+内外补白),t_effect为4或5时生效*/
　t_height:200,　　/*内容高度(包括边框+内外补白),t_effect为4或5时生效*/
　t_autoplay:0,　　/*1:表示自动播放;0:表示手动播放;*/
　t_autotime:1000,　　/*自动播放时间*/
　t_showtime:1000,　　/*动画显示时的时间*/
　t_hidetime:1000　　/*动画隐藏时的时间*/
});

想必看官一定会被上面黄色高亮部分所吸引，如果看官被吸引了并开始猜测用途时表明看官已经快成功了！

上面黄色高亮代码与以往的代码片断一样，均表示：值可修改。在这个插件中，艺灵一共提供了19个参数。可能很多看官看到此时会感觉到不解，干嘛这么麻烦，吧啦吧啦的。

这些疑问，艺灵不做解释。如果看官曾亲手写过该功能，看官自然能够理解为什么会有这么多参数。对于如此多的参数，看官也不必惊慌，通常情况下看官只需要修改几个值就可以实现想要的效果。

拿上面的24种选项卡轮播来说，纯鼠标滑过的情况共有6种，艺灵的代码中只修改了一个值，那就是t_effect的值，直接从0~5便实现了6种不同的效果！想知道为什么吗？

那是因为：艺灵的html及其它参数均是默认参数，根本就不需要修改就可以直接使用。当你想展示其它几种效果时，只要单独修改t_effect的值即可！所以，看官还嫌参数多？嫌插件麻烦吗？如果有，请另求高明吧，艺灵拯救不了你了......

如果看官需要此插件，可以从下面进行下载。

3.4、插件下载

源码打包下载

超帅轮播插件tabstools.js教程之选项卡特效源码.zip　

四、课后作业

教程文章写完了，不知道看官们掌握的怎么样了。艺灵给看官们留下一个作业吧。听题：写一个圆点+箭头+自动播放的demo页面。

如果看官不会，别忘记明天的教程哦！

----------完----------

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2016-02-25/368.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。