當前位置：
首頁 >
可自动定时切换的选项卡/滑动门导航代码
發布時間：2024/4/11
51
豆豆
生活随笔
收集整理的這篇文章主要介紹了
可自动定时切换的选项卡/滑动门导航代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼簡介：
這個滑動門特效不錯，可以設定時間，自動循環切換，也可以鼠標控制，而且選項卡也比較漂亮，在新浪和百度見到過這種自動切換的TAB，很實用，代碼也簡潔。
代碼內容：
<!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=gb2312" /> <title>可自動定時切換的選項卡/滑動門導航代碼_網頁代碼站(www.webdm.cn)</title><style> #index_yp { width:235px ; height:300px ; float:left }.index_yp_card { width:235px ; height:37px ; float:left }.yp_card_0, .yp_card_2, .yp_card_4 { width:55px ; height:37px ; float:left ; background-image:url(http://www.webdm.cn/images/20090922/index_yp_card.png) ; text-align:center ; color:#003366 ; font-weight:bold ; line-height:32px ;cursor:pointer}.yp_card_1, .yp_card_3, .yp_card_5, .yp_card_6 { width:45px ; height:37px ; float:left ; background-image:url(http://www.webdm.cn/images/20090922/index_yp_card.png) ; text-align:center ; color:#333333 ; line-height:32px ;cursor:pointer}.yp_card_0 { background-position:0px 0px }.yp_card_1 { background-position:-55px 0px }.yp_card_2 { background-position:-100px 0px }.yp_card_3 { background-position:-155px 0px }.yp_card_4 { background-position:-200px 0px }.yp_card_5 { background-position:-255px 0px }.yp_card_6 { background-position:-300px 0px }.index_yp_main { width:215px ; height:262px ; float:left ; border:1px solid #71B3C6 ; border-top:0px!important ; padding:0px 9px 0px 9px }.yp_main_content { width:201px ; height:33px ; float:left ; border:1px solid #BCDCE4 ; background-color:#F1F8FA ; margin-bottom:7px ; padding:3px 6px 3px 6px ;overflow:hidden }.yp_main_content dt { width:201px;height:13px;float:left;font-weight:normal;margin:0px;font-size:12px;padding-top:2px}.yp_main_content dd { width:201px;line-height:13px;float:left;font-weight:normal;margin:0px;font-size:12px;padding-top:3px;text-align:right}.yp_main_content img { padding:0px 0px 2px 3px}.yp_main_list { width:215px ; float:left }#index_m2_ad { width:690px ; height:100px ; padding:5px 0px 0px 5px ; float:left } </style> </head> <body> <div id="index_yp"><!--yp1 start--><div id="yp_card1" style="display:block"> <div class="index_yp_card"><div οnmοuseοver="changeMc(1,1)" οnmοuseοut="hi()" class="yp_card_0">ASP</div><div οnmοuseοver="changeMc(1,2)" οnmοuseοut="hi()" class="yp_card_3">PHP</div><div οnmοuseοver="changeMc(1,3)" οnmοuseοut="hi()" class="yp_card_3">JSP</div><div οnmοuseοver="changeMc(1,4)" οnmοuseοut="hi()" class="yp_card_3">VC++</div><div οnmοuseοver="changeMc(1,5)" οnmοuseοut="hi()" class="yp_card_5">綜合</div></div><div οnmοuseοver="changeMc(1,1)" οnmοuseοut="hi()" class="index_yp_main">ASP(循環周期(1秒))</div></div><!--end--><!--yp2 start--><div id="yp_card2" style="display:none"> <div class="index_yp_card"><div οnmοuseοver="changeMc(2,1)" οnmοuseοut="hi()" class="yp_card_1">ASP</div><div οnmοuseοver="changeMc(2,2)" οnmοuseοut="hi()" class="yp_card_2" >PHP</div><div οnmοuseοver="changeMc(2,3)" οnmοuseοut="hi()" class="yp_card_3">JSP</div><div οnmοuseοver="changeMc(2,4)" οnmοuseοut="hi()" class="yp_card_3">VC++</div><div οnmοuseοver="changeMc(2,5)" οnmοuseοut="hi()" class="yp_card_5">綜合</div></div><div οnmοuseοver="changeMc(2,2)" οnmοuseοut="hi()" class="index_yp_main">PHP(循環周期(1秒))</div></div><!--end--><!--yp3 start--><div id="yp_card3" style="display:none"> <div class="index_yp_card"><div οnmοuseοver="changeMc(3,1)" οnmοuseοut="hi()" class="yp_card_1">ASP</div><div οnmοuseοver="changeMc(3,2)" οnmοuseοut="hi()"class="yp_card_6">PHP</div><div οnmοuseοver="changeMc(3,3)" οnmοuseοut="hi()" class="yp_card_2">JSP</div><div οnmοuseοver="changeMc(3,4)" οnmοuseοut="hi()" class="yp_card_3">VC++</div><div οnmοuseοver="changeMc(3,5)" οnmοuseοut="hi()" class="yp_card_5">綜合</div></div><div οnmοuseοver="changeMc(3,3)" οnmοuseοut="hi()" class="index_yp_main">JSP(循環周期(1秒))</div></div><!--end--><!--yp4 start--><div id="yp_card4" style="display:none"> <div class="index_yp_card"><div οnmοuseοver="changeMc(4,1)" οnmοuseοut="hi()" class="yp_card_1">ASP</div><div οnmοuseοver="changeMc(4,2)" οnmοuseοut="hi()" class="yp_card_6">PHP</div><div οnmοuseοver="changeMc(4,3)" οnmοuseοut="hi()" class="yp_card_6">JSP</div><div οnmοuseοver="changeMc(4,4)" οnmοuseοut="hi()" class="yp_card_2">VC++</div><div οnmοuseοver="changeMc(4,5)" οnmοuseοut="hi()" class="yp_card_5">綜合</div></div><div οnmοuseοver="changeMc(4,4)" οnmοuseοut="hi()" class="index_yp_main">VC++(循環周期(1秒))</div></div><!--end--><!--yp5 start--><div id="yp_card5" style="display:none"> <div class="index_yp_card"><div οnmοuseοver="changeMc(5,1)" οnmοuseοut="hi()" class="yp_card_1">ASP</div><div οnmοuseοver="changeMc(5,2)" οnmοuseοut="hi()" class="yp_card_6">PHP</div><div οnmοuseοver="changeMc(5,3)" οnmοuseοut="hi()" class="yp_card_6">JSP</div><div οnmοuseοver="changeMc(5,4)" οnmοuseοut="hi()" class="yp_card_6">VC++</div><div οnmοuseοver="changeMc(5,5)" οnmοuseοut="hi()" class="yp_card_4">綜合</div></div><div οnmοuseοver="changeMc(5,5)" οnmοuseοut="hi()" class="index_yp_main">綜合(循環周期(1秒))</div></div><!--end--> </div> <script language="javascript" type="text/javascript"> <!-- var s=5; var t=1000;//循環周期(1秒) var timer; function changeMc(x,y){ // x是當前顯示的層 y是即將顯示的層clearTimeout(timer);if (x!=y){document.getElementById('yp_card'+x).style.display = "none";document.getElementById('yp_card'+y).style.display = "block";s=y} } function hi(){ timer=setTimeout("sh()",t) } function sh(){s=(s>=5)?1:s+1for (var i=1;i<=5;i++){document.getElementById("yp_card"+i).style.display = "none";}document.getElementById("yp_card"+s).style.display = "block"timer=setTimeout("sh()",t) } sh()--> </script> </body> </html> <br> <p><a href="http://www.webdm.cn">網頁代碼站</a> - 最專業的代碼下載網站 - 致力為中國站長提供有質量的代碼！</p>代碼來自：http://www.webdm.cn/webcode/450a0d7e-f1d0-4a33-baf0-4fcb80b5a6e7.html
轉載于:https://www.cnblogs.com/webdm/archive/2011/04/16/2017800.html
總結
以上是生活随笔為你收集整理的可自动定时切换的选项卡/滑动门导航代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 有向图的邻接表表示法
- 下一篇： 几个免费高质量图标搜索引擎。