知识大全 Jquery封装tab自动切换效果的具体实现

Posted 2022-07-20 知

篇首语：男儿欲遂平生志，六经勤向窗前读。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 Jquery封装tab自动切换效果的具体实现相关的知识，希望对你有一定的参考价值。

Jquery封装tab自动切换效果的具体实现 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　今天我这边网速真是太慢了打开一个网页要等待很久但是还是想写篇文章 tab自动切换因为工作中经常会碰到这样的问题所以写博客也是总结下最重要的是能分享下及以后碰到类似的可以参考下！当然这是我用Jquery来封装的页面可以调用多次调用方式 new tabSlider(obj count); obj指容器最外层ID count指有多个li 当然要引用我这个js的话一定要按照我结构来写！下面的是我的HTML一些结构如下

复制代码代码如下: <div id="tab "> <ul > <li >tab </li> <li>tab </li> <li>tab </li> <li >tab </li> </ul> <div > <div >tab </div> <div >tab </div> <div >tab </div> <div >tab </div> </div> </div>

　　结构是这样的！下面是我页面上的HTML/CSS的代码！

复制代码代码如下: <meta equiv="Content Type" content="text/; charset=utf " /> <title>无标题文档</title> <script type=text/javascript src= <style> #tab width: px; height: px; overflow:hidden; border: px solid # ; #tab width: px; height: px; overflow:hidden; border: px solid # ; menu width: px; height: px; margin: ; padding: ; menu li float:left; list style:none; width: px; text align:center; border bottom: px solid # ; border right: px solid # ; cursor:pointer; menu li current border bottom:none; content main width: px; height: px; overflow:hidden; content width: px; height: px; overflow:hidden; display:block; hide display:none;width: px; height: px; overflow:hidden; menu li last col border right:none; width: px; </style> <script src=AutoTab js"></script> </head> <body> <div id="tab "> <ul > <li >tab </li> <li>tab </li> <li>tab </li> <li >tab </li> </ul> <div > <div >tab </div> <div >tab </div> <div >tab </div> <div >tab </div> </div> </div> <br /><br /> <div id="tab "> <ul > <li >tab </li> <li>tab </li> <li>tab </li> <li >tab </li> </ul> <div > <div >tab </div> <div >tab </div> <div >tab </div> <div >tab </div> </div> </div> <script>new tabSlider("#tab " );</script> <script>new tabSlider("#tab " );</script> </body> </>

　　 JS代码如下

复制代码代码如下: // JavaScript Document /* *@date *@ author tugenhua *@ email tugenhua@ *@ 可以一个页面多次引用依赖的结构 */ <div id="tab "> <ul > <li >tab </li> <li>tab </li> <li>tab </li> <li >tab </li> </ul> <div > <div >tab </div> <div >tab </div> <div >tab </div> <div >tab </div> </div> </div> /*页面引用的方式 new tabSlider("#tab " ); #tab 是外部ID 指一共有多少个li */ function tabSlider(obj count) var _this = this; _this obj = obj; _this count = count; _this time = ;//停留的时间 _this n = ; var t; this slider = function() $(_this obj + " menu li") bind("mouseover" function(event) $(event target) addClass("current") siblings() removeClass("current"); var index = $(_this obj + " menu li") index(this); $(_this obj + " content main content") eq(index) show() siblings() hide(); _this n = index; ) this addhover = function() $(_this obj) hover(function()clearInterval(t); function()t=setInterval(_this autoplay _this time)); this autoplay = function() _this n = _this n >=(_this count )? : ++_this n; $(_this obj + " menu li") eq(_this n) trigger("mouseover"); this factory = function() this slider(); this addhover(); t = setInterval(this autoplay _this time); this factory();

　　下面来说说下我封装这个js的思路因为写任何程序思路是最重要的只要能想的清楚代码就一定能实现掉！思路说的更好听的话就是我们常说的“算法”！ function tabSlider(obj count) 用这个js来封装后传入参数！当在HTML页面上时直接调用tabSlider(obj count)就可以了！初始化一些参数然后给这个函数自生自定义一个函数this slider = function() 绑定个mouseover事件初始化第一个li时查找当前的div内容是否和当前li 指向同一个指针如果相同那块内容显示！其他的隐藏！自定义this addHover这个事件当鼠标移上时候抽发这个事件！自定义自动播放事件this autoplay = function() 这个里面用了trigger这个触发方法_this n = _this n >=(_this count )? : ++_this n; $(_this obj + " menu li") eq(_this n) trigger("mouseover"); 最后用个函数来渲染上面的函数调用上面的函数

复制代码代码如下: cha138/Article/program/Java/JSP/201311/19807