jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門(mén)效果
本文實(shí)例講述了jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門(mén)效果。分享給大家供大家參考。具體如下:
這是一個(gè)滑動(dòng)門(mén)代碼,從外觀上看,簡(jiǎn)潔經(jīng)典,似乎與平時(shí)見(jiàn)到的滑動(dòng)門(mén)沒(méi)什么區(qū)別,不過(guò)它有一個(gè)重要的功能與眾不同,那就是會(huì)自動(dòng)切換【播放】滑動(dòng)門(mén)的內(nèi)容,像騰訊QQ登錄后彈出的每日要聞一樣,如果你再加以美化,那么就更完美無(wú)暇了。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-auto-cha-tab-style-codes/
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="jquery1.3.2.js"></script> <title>autoTab,自動(dòng)切換播放的滑動(dòng)門(mén)</title> </head> <style> *{ margin:0; padding:0;} ul{ list-style:none} body{ font-size:12px} #tabMenus{ width:400px; margin:100px auto 0 auto;overflow:hidden; border:#ccc solid 1px; border-bottom:none;} #tabMenus li{ float:left; width:100px; height:25px; line-height:25px; background:#ccc; text-align:center} #tabMenus li a{ display:block; height:100%; color:#000000; text-decoration:none} #tabMenus li.current{background:#fff} #tabMenus li.usual{background:#ccc;} #tabCons{ clear:both;width:400px; margin:0 auto; overflow:hidden; border:#ccc solid 1px; border-top:none} #tabCons .con{ float:left; padding:10px; width:380px; display:none} </style> <script> $(document).ready(function(){ var j=0; $("#tabMenus li:first").addClass("current"); $("#tabCons div:first").show(); $("#tabMenus li").each(function(i){ $(this).click(function(){ $(this).addClass("current").siblings().removeClass(); $("#tabCons > div").hide(); $("#tabCons div:eq(" + i + ")").show(); }) }) var t=setInterval(function(){ $("#tabMenus li:eq("+j+")").trigger("click"); if(j<3){ j++; }else{ j=0; } },1000) }) </script> <body> <ul id="tabMenus"> <li><a href="#">1111</a></li> <li><a href="#">2222</a></li> <li><a href="#">3333</a></li> <li><a href="#">4444</a></li> </ul> <div id="tabCons"> <div class="con">1111</div> <div class="con">2222</div> <div class="con">3333</div> <div class="con">4444</div> </div> </body> </html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)類(lèi)似滑動(dòng)門(mén)切換效果的層切換
- jQuery實(shí)現(xiàn)的經(jīng)典滑動(dòng)門(mén)效果
- 基于jquery自己寫(xiě)tab滑動(dòng)門(mén)(通用版)
- jQuery實(shí)現(xiàn)的多滑動(dòng)門(mén),多選項(xiàng)卡效果代碼
- jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門(mén)菜單效果
- 使用jquery實(shí)現(xiàn)div的tab切換實(shí)例代碼
- jQuery簡(jiǎn)單tab切換效果實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果
- jQuery簡(jiǎn)單幾行代碼實(shí)現(xiàn)tab切換
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- Jquery滑動(dòng)門(mén)/tab切換實(shí)現(xiàn)方法完整示例
相關(guān)文章
jQuery EasyUI API 中文文檔 - Dialog對(duì)話框
jQuery EasyUI API 中文文檔 - Dialog對(duì)話框使用說(shuō)明,需要的朋友可以參考下。2011-11-11jquery實(shí)現(xiàn)用戶打分評(píng)分特效
很多網(wǎng)站都應(yīng)用了評(píng)分效果,讓用戶可以對(duì)正在瀏覽的文章、電影、資源等進(jìn)行評(píng)分,讓網(wǎng)站增添了幾分互動(dòng)效果。本文將講解如何使用jQuery來(lái)實(shí)現(xiàn)評(píng)分效果。2015-05-05Jquery ajax請(qǐng)求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇Jquery ajax請(qǐng)求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06JQuery用戶名校驗(yàn)的具體實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了JQuery用戶名校驗(yàn)的具體實(shí)現(xiàn),感興趣的小伙伴們可以參考一下2016-03-03輕松使用jQuery雙向select控件Bootstrap Dual Listbox
這篇文章主要教大家如何輕松使用jQuery雙向select控件Bootstrap Dual Listbox,感興趣的小伙伴們可以參考一下2015-12-12jquery增加時(shí)編輯jqGrid(實(shí)例代碼)
jquery增加時(shí)編輯jqGrid(實(shí)例代碼)。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11jQuery+CSS 實(shí)現(xiàn)的超Sexy下拉菜單
早前發(fā)現(xiàn)了 Soh Tanaka 分享的非常 Sexy 的 Drop Down Menu w/ jQuery & CSS,稍作修改實(shí)現(xiàn)了多級(jí)下拉,并實(shí)現(xiàn)了 ASP.NET 中通過(guò)輸出 HTML 動(dòng)態(tài)創(chuàng)建版本,有興趣的童鞋可以包裝成 Server Control。2010-01-01jQuery AJAX 方法success()后臺(tái)傳來(lái)的4種數(shù)據(jù)詳解
今天小編就為大家分享一篇jQuery AJAX 方法success()后臺(tái)傳來(lái)的4種數(shù)據(jù)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08jQuery+JSON實(shí)現(xiàn)AJAX二級(jí)聯(lián)動(dòng)實(shí)例分析
這篇文章主要介紹了jQuery+JSON實(shí)現(xiàn)AJAX二級(jí)聯(lián)動(dòng)的方法,以實(shí)例形式分析了前臺(tái)jQuery結(jié)合ajax傳遞json格式數(shù)據(jù)及后臺(tái)數(shù)據(jù)處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12