摘要：
　　通过tabstools.js插件可实现多种轮播，如：选项卡轮播、数字轮播、缩略图轮播、卡盘轮播、常规轮播、多栏滚动、无缝滚动、循环滚动等。今天，艺灵将为外行看官介绍下数字及缩略图轮播的秘密......

艺灵上次分享的教程：超帅轮播插件tabstools.js教程之选项卡轮播特效中有一道作业题，今天艺灵来为看官揭晓答案。

其实数字轮播跟选项卡轮播或缩略图轮播本来是没什么区别的，但仍有很多不明真相的看官以为这是两个完全不一样的特效！如果看官现在仍这么觉得，那么，请不要错过这篇教程文章！

废话不多说，进入主题。

一、demo案例

1.1、html源码

html源码框架

<!--数字+箭头+自动播放轮播外框架-->
<div class="ylsj-banner" id="yilingsj-tabs_num">
　<!--目标列表-->
　<div class="gytab-hd">
　　<a class="gh-list on">1</a><a class="gh-list">2</a><a class="gh-list">3</a>
　</div>
　<!--内容列表-->
　<div class="gytab-bdw">
　　<ul class="gytab-bd">
　　　<li class="gb-list bd-on" style="display: block;" >
　　　　<img src="第一张图片路径" />
　　　</li>
　　　<li class="gb-list" >
　　　　<img src="第二张图片路径" />
　　　</li>
　　　<li class="gb-list" >
　　　　<img src="第三张图片路径" />
　　　</li>
　　</ul>
　</div>
　<!--翻页按钮-->
　<div class="gytab-btn">
　　<span class="gy-prev"><</span>
　　<span class="gy-next">></span>
　</div>
</div>

css(一切玄机尽在这里！)

<style>
/*轮播公用代码*/
.ylsj-banner{position:relative;margin:0 auto}
.ylsj-banner .gytab-bdw{height:100%;overflow:hidden}
.ylsj-banner .gytab-bd{width:100%}
.ylsj-banner .gb-list{width:100%;height:100px;overflow:hidden;float:left;background:#fff;display:none}
.ylsj-banner .gb-list img{width:100%;height:100%}
.ylsj-banner .gytab-bd .bd-on{z-index:10}
.ylsj-banner .gytab-bd .bd-on img{}
.ylsj-banner .gytab-hd{width:100%}
.ylsj-banner .gytab-hd .gh-list{display:inline-block;cursor:pointer}
.ylsj-banner .gytab-hd .on{}
.gytab-btn{position:absolute;cursor:pointer}
/*圆圈+数字*/
#yilingsj-tabs_num{height:150px;width:200px}
#yilingsj-tabs_num .gb-list{height:150px}
#yilingsj-tabs_num .gytab-hd{position:absolute;bottom:10px;text-align:center;z-index:10}
#yilingsj-tabs_num .gh-list{width:16px;height:16px;line-height:16px;margin:0 5px;font-size:12px;background-color:#cacaca;border-radius:50%;text-align:center}
#yilingsj-tabs_num .gytab-hd .on{background-color:#ff9000}
#yilingsj-tabs_num .gytab-btn{top:50%;width:100%;height:0;margin-top:-15px}
#yilingsj-tabs_num .gy-prev,#yilingsj-tabs_num  .gy-next{width:30px;height:30px;display:block;text-align:center;line-height:30px;background:rgba(255,255,255,.5)}
#yilingsj-tabs_num .gy-next{position:absolute;right:0;top:0}
</style>

1.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>

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

1.3、调用插件

调用插件

<script>
$(function(){
$('#yilingsj-tabs_num').tabstools({
　t_effect:1,　　/*动画切换类型，1:淡入淡出;*/
　t_autoplay:1,　　/*1:表示自动播放;*/
　t_autotime:2000,　　/*自动播放时间*/
　t_showtime:2000,　　/*动画显示时的时间*/
　t_hidetime:1000　　/*动画隐藏时的时间*/
});
});
</script>

最终的效果：

怎么样，源码还是昨天的源码，而效果却不一样了。

二、真相

其实说白了，不管是选项卡轮播还是数字轮播还是长条轮播这些形状都是通过css来进行控制，html源码不会发生一点变化！对于自动播放功能，这个通过插件中的t_autoplay值来进行控制。这下看官明白了吗？

三、缩略图轮播分析

至于缩略图的话，我们只需要将目标列表中的内容替换成图片即可！例如将上面的数字1,2,3分别替换成3张对应的小图片，然后通过css略做样式调整，js源码不需要做任何处理。

缩略图轮播欣赏：

明天，艺灵将介绍多栏滚动轮播，这个可是重头戏哦！

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

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

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