可自动定时切换的选项卡/滑动门导航代码

代码简介：

这个滑动门特效不错，可以设定时间，自动循环切换，也可以鼠标控制，而且选项卡也比较漂亮，在新浪和百度见到过这种自动切换的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

可自动定时切换的选项卡/滑动门导航代码相关推荐

很棒带阴影的JS+CSS滑动门菜单代码
代码简介: 绝对值得一看的CSS滑动门,因为它在鼠标放上后自动弹出一个带阴影的层,无操作的情况下层会自动隐藏,这样更节省网页布局,而且它的风格也很清新,淘宝网有这种效果,没有用到任何修饰图片,绝对不容 ...
绝对经典的滑动门特效代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...
一个简单的滑动门效果代码
//滑动门 function menu(a,idName,cssName) { for(i=1;i<=2;i++) { if(i==a) { ...
后台自动定时切换壁纸工具
说明托盘运行,不会显示在任务栏中自动保存,加载上一次配置,结合开机自启,配置一次,永久运行某些异常,BUG并未处理,懒,但不影响正常使用,毕竟这是我自己使用的界面壁纸源文本框只可以复制,不可 ...
图片切换效果（滑动门技术）
< html > < head > < meta http-equiv ="Content-Type" content ="text/h ...
李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素作 ...
带绿色箭头指示的滑动门DIV效果
带箭头指向的首页滑动门特效代码,而且可以很方便的在滑动和鼠标点击之间切换,代码比以前的很多滑动门都简洁,而且效果相当舒服,宽度和高度根据你网页的大小可以自己修改,要注意CSS文件内的图片路径要一并修改 ...
一款功能综合的CSS滑动门特效
一个功能综合的CSS滑动门特效代码,在滑动门里包含列表.包含图文混排.包含文字滚动,其中任意一个都是我们常用的,综合运用这些功能才能做出更炫丽.符合标准的网页来. 注:本特效的代码没有经过优化,仅为了 ...
CSS常用技巧（元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美）
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...

可自动定时切换的选项卡/滑动门导航代码

可自动定时切换的选项卡/滑动门导航代码相关推荐

最新文章

热门文章