我在工作中经常遇到各种情况的tab切换和广告图片轮播效果,比如点击按钮实现图片上下滚动,淡入淡出,延迟tab,无限tab等等。之前的博客里面也写过相关的代码。但是如果每页页面或当前页面有很多不同效果的轮播同时出现,那么引入相应的代码就会有很多重复和垃圾代码,所以我决定写一个新的插件,通杀所有效果。
于是gTabs插件今天就诞生了,目前版本为1.0,后续可能还会添加更多的效果。
演示地址:http://www.liuxiaofan.com/demo/gtabs.html
下载地址:http://liuxiaofan.com/download/gtabs.rar


使用方法例如下面这样:

[js]<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="gtabs.js"></script>
<script type="text/javascript">
$(function() {
$(".j-lxftabs").gTabs();

$(".j-lxftabs2").gTabs({
auto:1000,
animated:"up"
});
$(".j-lxftabs4").gTabs({
auto:3000,
animated:"left"
});
$(".j-lxftabs3").gTabs({
auto:1000,
bind:"click",
animated:"fadein"
});
})
</script>[/js]
html的结构注意父级div为主id,然后给按钮和要显示的内容的父级加上对应的样式名即可,例如:

[html]<div class="lxftab j-lxftabs">
<div class="box j-gTbox">
<div>
<div>头条内容头条内容头条内</div>
</div>

<div ><div>娱乐内容部分娱乐内容部分娱乐内容部分</div>
</div>
<div>
<div>体育内容部分体育内容部分体育内容部</div>
</div>
</div>

<div class="clearfix btn j-gTbtn">
<a href="#" class="cur">头条</a>
<a href="#">娱乐</a>
<a href="#">体育</a>
</div>
</div>[/html]
我相信有点基础的朋友都应该看得懂吧,实在不明白可以评论本博客我将会及时的回复你。

转载请注明来自:爱前端

One thought on “原创jQuery标签切换插件“gTabs”正式发布

发表评论

电子邮件地址不会被公开。 必填项已用*标注