点击左右有缝轮播html 超帅轮播插件tabstools.js教程之实现数字+箭头+多栏轮播

摘要：

前面我们讲了tabstools.js插件可实现多种轮播，如：选项卡轮播、数字轮播、缩略图轮播、卡盘轮播、等等，今天我们再来了解下多栏轮播效果......

万万没想到！写这篇文章竞是在两个月之后......虽然写的有点晚，但该分享的还是要有的。

两个月前，艺灵分享了自己制作的一款jquery插件-- 超帅轮播插件tabstools.js，目前已写了两篇不同的教程来挖掘此插件的功能，想了解的看官可前去了解。今天，我们将来分析下这个多栏滚动轮播特效。

一、什么是多栏滚动轮播

艺灵自己定义的名词，还是上图吧，这样理解起来比较快速一点。配图：

如图所示，此时的轮播每次会滚动多个栏目，因此，艺灵称之为多栏滚动轮播。

二、实现方法

如果看官想自己动手制作这个效果的话，首先要实现普通的轮播效果才行！只有解决了普通的轮播问题，才能实现多栏轮播！废话不多说，上案例吧。

三、demo效果及源码

三栏轮播，每次滚动两栏。展示效果：

1.1、html源码

html源码框架

12355

1&ltl/div> 2&ltl/div> 3&ltl/div> 4&ltl/div> 5&ltl/div> 6&ltl/div> 7&ltl/div> 8&ltl/div> 9&ltl/div> 10&ltl/div>

<

>

css样式

/*轮播公用代码*/

.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_duolan{height:75px;width:320px}

#yilingsj-tabs_duolan .gytab-bdw{width:320px}

#yilingsj-tabs_duolan .gytab-bd{height:75px;width:330px}

#yilingsj-tabs_duolan .gb-list{height:75px;width:100px;margin-right: 10px;float: left;display: block;}

#yilingsj-tabs_duolan .gb-list div{height: 100%;font-size: 30px;color: #fff;}

#yilingsj-tabs_duolan .gytab-hd{position:absolute;bottom:10px;text-align:center;_font-size:0;_overflow:hidden;_height:10px;z-index:10}

#yilingsj-tabs_duolan .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_duolan .gytab-hd .on{background-color:#ff9000}

#yilingsj-tabs_duolan .gytab-btn{top:50%;width:100%;height:0;margin-top:-15px}

#yilingsj-tabs_duolan .gy-prev,#yilingsj-tabs_duolan .gy-next{width:30px;height:30px;display:block;text-align:center;line-height:30px;background:rgba(255,255,255,.5)}

#yilingsj-tabs_duolan .gy-next{position:absolute;right:0;top:0}

.bg-ccc{background-color:#ccc;}

.bg-ddd{background-color:#ddd;}

.bg-eee{background-color:#eee;}

.bg-222{background-color:#222;}

.bg-333{background-color:#333;}

.bg-444{background-color:#444;}

.bg-555{background-color:#555;}

.bg-666{background-color:#666;}

.bg-777{background-color:#777;}

.bg-888{background-color:#888;}

1.2、引入tabstools.js插件

引入js文件

1.3、调用插件

调用插件

$(function(){

$('#yilingsj-tabs_duolan').tabstools({

t_num:2,/*表示每次滚动的个数;*/

t_col:3,/*每一组展示几个 ; t_effect为4或5时生效;*/

t_width:110,/*内容宽度(包括边框+内外补白)*/

t_effect:4,/*动画切换类型，4:水平滚动;*/

t_autoplay:1,/*1:表示自动播放;*/

t_autotime:2000,/*自动播放时间*/

t_showtime:2000,/*动画显示时的时间*/

t_hidetime:1000/*动画隐藏时的时间*/

});

});

上面展示的这些源码都上上面案例的源码，最后来讲几个注意事项，也是制作多栏滚动轮播中的坑点。

四、多栏滚动中的坑点

4.1、目标列表的数量

之前我们做普通轮播时，目标列表的数量=内容列表的数量。也就是说：一个目标列表对应着一个内容列表。但在多栏轮播中，这个条件不总是成立！

为何？

首先，我们的多栏会展示超过1个的轮播，上面案例展示了3个位置，而我们最终看到目标列表的数量只有5个，并没有出现6~10。不知道看官们有没有发现这个问题。

4.2、如何算出目标列表的数量

为什么不会出现6~10呢？原因很简单：上面的多栏轮播每次滚动数量为2，总数量是10。10/2=5。所以不会出现6~10。即使看官在写html页面代码时添加了10个目标列表，在实际展示的时候也会只显示5个。因为艺灵已重新计算了一遍正确的个数。如果看官不确定到底有多少个目标列表，建议按内容的个数添加就是了。要保证一点：尽量多加，不要减少！

4.3、滚动到最后面时出现空白如何替补

如果按照正常的方式来进行轮播，当目标列表展示到4的时候，此时内容列表中对应的内容为：7,8,9，也就是说：还剩下一个10没有展示。如果看官点击了目标5，下一组会展示：9,10,11。但问题是：现在内容列表的总数量只有10个！如果不进行替补，就会出现空白。即：11这个位子是空的，配图：

那怎么办呢？

艺灵的方法是：复制前面的1，然后插入到10的后面。这样，目标5的时候展示的就是：9，10，1，也就不会出现空白了。此时也就解决了有缝轮播的问题。至于这个复制，艺灵的插件会自动进行计算，并不需要看官进行手工复制。

好了，这篇教程就到此结束。至于此插件，还有做很多效果，可支持同class的多个轮播，并且不会产生影响。上面及之前的案例均以id为标识。如果看官有兴趣，可以进行动手尝试下。

五、插件下载

源码打包下载

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

转载声明：

若亲想转载本文到其它平台，请务必保留本文出处！

本文链接：/jquery/-05-04/392.html

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