jQuery實(shí)現(xiàn)自動切換播放的經(jīng)典滑動門效果
本文實(shí)例講述了jQuery實(shí)現(xiàn)自動切換播放的經(jīng)典滑動門效果。分享給大家供大家參考。具體如下:
這是一個滑動門代碼,從外觀上看,簡潔經(jīng)典,似乎與平時見到的滑動門沒什么區(qū)別,不過它有一個重要的功能與眾不同,那就是會自動切換【播放】滑動門的內(nèi)容,像騰訊QQ登錄后彈出的每日要聞一樣,如果你再加以美化,那么就更完美無暇了。
運(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,自動切換播放的滑動門</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>
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)類似滑動門切換效果的層切換
- jQuery實(shí)現(xiàn)的經(jīng)典滑動門效果
- 基于jquery自己寫tab滑動門(通用版)
- jQuery實(shí)現(xiàn)的多滑動門,多選項(xiàng)卡效果代碼
- jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動門菜單效果
- 使用jquery實(shí)現(xiàn)div的tab切換實(shí)例代碼
- jQuery簡單tab切換效果實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)簡單Tab切換菜單效果
- jQuery簡單幾行代碼實(shí)現(xiàn)tab切換
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- Jquery滑動門/tab切換實(shí)現(xiàn)方法完整示例
相關(guān)文章
jQuery EasyUI API 中文文檔 - Dialog對話框
jQuery EasyUI API 中文文檔 - Dialog對話框使用說明,需要的朋友可以參考下。2011-11-11Jquery ajax請求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狫query ajax請求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧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+CSS 實(shí)現(xiàn)的超Sexy下拉菜單
早前發(fā)現(xiàn)了 Soh Tanaka 分享的非常 Sexy 的 Drop Down Menu w/ jQuery & CSS,稍作修改實(shí)現(xiàn)了多級下拉,并實(shí)現(xiàn)了 ASP.NET 中通過輸出 HTML 動態(tài)創(chuàng)建版本,有興趣的童鞋可以包裝成 Server Control。2010-01-01jQuery AJAX 方法success()后臺傳來的4種數(shù)據(jù)詳解
今天小編就為大家分享一篇jQuery AJAX 方法success()后臺傳來的4種數(shù)據(jù)詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08jQuery+JSON實(shí)現(xiàn)AJAX二級聯(lián)動實(shí)例分析
這篇文章主要介紹了jQuery+JSON實(shí)現(xiàn)AJAX二級聯(lián)動的方法,以實(shí)例形式分析了前臺jQuery結(jié)合ajax傳遞json格式數(shù)據(jù)及后臺數(shù)據(jù)處理技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-12-12