选项卡固定时间自动切换〔转〕
2009-06-15 13:51
337 查看
<!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>Semiall.com</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="index_yp">
<!--yp1 start-->
<div id="yp_card1" style="display:block">
<div class="index_yp_card">
<div onmouseover="changeMc(1,1)" onmouseout="hi()" class="yp_card_0">推荐</div>
<div onmouseover="changeMc(1,2)" onmouseout="hi()" class="yp_card_3">生产</div>
<div onmouseover="changeMc(1,3)" onmouseout="hi()" class="yp_card_3">贸易</div>
<div onmouseover="changeMc(1,4)" onmouseout="hi()" class="yp_card_3">服务</div>
<div onmouseover="changeMc(1,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(1,1)" onmouseout="hi()" class="index_yp_main">推荐(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp2 start-->
<div id="yp_card2" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(2,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(2,2)" onmouseout="hi()" class="yp_card_2" >生产</div>
<div onmouseover="changeMc(2,3)" onmouseout="hi()" class="yp_card_3">贸易</div>
<div onmouseover="changeMc(2,4)" onmouseout="hi()" class="yp_card_3">服务</div>
<div onmouseover="changeMc(2,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(2,2)" onmouseout="hi()" class="index_yp_main">生产(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp3 start-->
<div id="yp_card3" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(3,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(3,2)" onmouseout="hi()"class="yp_card_6">生产</div>
<div onmouseover="changeMc(3,3)" onmouseout="hi()" class="yp_card_2">贸易</div>
<div onmouseover="changeMc(3,4)" onmouseout="hi()" class="yp_card_3">服务</div>
<div onmouseover="changeMc(3,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(3,3)" onmouseout="hi()" class="index_yp_main">贸易(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp4 start-->
<div id="yp_card4" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(4,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(4,2)" onmouseout="hi()" class="yp_card_6">生产</div>
<div onmouseover="changeMc(4,3)" onmouseout="hi()" class="yp_card_6">贸易</div>
<div onmouseover="changeMc(4,4)" onmouseout="hi()" class="yp_card_2">服务</div>
<div onmouseover="changeMc(4,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(4,4)" onmouseout="hi()" class="index_yp_main">服务(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp5 start-->
<div id="yp_card5" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(5,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(5,2)" onmouseout="hi()" class="yp_card_6">生产</div>
<div onmouseover="changeMc(5,3)" onmouseout="hi()" class="yp_card_6">贸易</div>
<div onmouseover="changeMc(5,4)" onmouseout="hi()" class="yp_card_6">服务</div>
<div onmouseover="changeMc(5,5)" onmouseout="hi()" class="yp_card_4">综合</div>
</div>
<div onmouseover="changeMc(5,5)" onmouseout="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+1
for (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>
#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(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(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 }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Semiall.com</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="index_yp">
<!--yp1 start-->
<div id="yp_card1" style="display:block">
<div class="index_yp_card">
<div onmouseover="changeMc(1,1)" onmouseout="hi()" class="yp_card_0">推荐</div>
<div onmouseover="changeMc(1,2)" onmouseout="hi()" class="yp_card_3">生产</div>
<div onmouseover="changeMc(1,3)" onmouseout="hi()" class="yp_card_3">贸易</div>
<div onmouseover="changeMc(1,4)" onmouseout="hi()" class="yp_card_3">服务</div>
<div onmouseover="changeMc(1,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(1,1)" onmouseout="hi()" class="index_yp_main">推荐(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp2 start-->
<div id="yp_card2" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(2,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(2,2)" onmouseout="hi()" class="yp_card_2" >生产</div>
<div onmouseover="changeMc(2,3)" onmouseout="hi()" class="yp_card_3">贸易</div>
<div onmouseover="changeMc(2,4)" onmouseout="hi()" class="yp_card_3">服务</div>
<div onmouseover="changeMc(2,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(2,2)" onmouseout="hi()" class="index_yp_main">生产(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp3 start-->
<div id="yp_card3" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(3,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(3,2)" onmouseout="hi()"class="yp_card_6">生产</div>
<div onmouseover="changeMc(3,3)" onmouseout="hi()" class="yp_card_2">贸易</div>
<div onmouseover="changeMc(3,4)" onmouseout="hi()" class="yp_card_3">服务</div>
<div onmouseover="changeMc(3,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(3,3)" onmouseout="hi()" class="index_yp_main">贸易(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp4 start-->
<div id="yp_card4" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(4,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(4,2)" onmouseout="hi()" class="yp_card_6">生产</div>
<div onmouseover="changeMc(4,3)" onmouseout="hi()" class="yp_card_6">贸易</div>
<div onmouseover="changeMc(4,4)" onmouseout="hi()" class="yp_card_2">服务</div>
<div onmouseover="changeMc(4,5)" onmouseout="hi()" class="yp_card_5">综合</div>
</div>
<div onmouseover="changeMc(4,4)" onmouseout="hi()" class="index_yp_main">服务(循环周期(1秒))</div>
</div>
<!--end-->
<!--yp5 start-->
<div id="yp_card5" style="display:none">
<div class="index_yp_card">
<div onmouseover="changeMc(5,1)" onmouseout="hi()" class="yp_card_1">推荐</div>
<div onmouseover="changeMc(5,2)" onmouseout="hi()" class="yp_card_6">生产</div>
<div onmouseover="changeMc(5,3)" onmouseout="hi()" class="yp_card_6">贸易</div>
<div onmouseover="changeMc(5,4)" onmouseout="hi()" class="yp_card_6">服务</div>
<div onmouseover="changeMc(5,5)" onmouseout="hi()" class="yp_card_4">综合</div>
</div>
<div onmouseover="changeMc(5,5)" onmouseout="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+1
for (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>
#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(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(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 }
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 选项卡固定时间自动切换
- 分步解析JavaScript实现tab选项卡自动切换功能
- 淘宝首页自动切换选项卡变换内容
- 批处理自动切换固定IP和动态IP
- 程序控制选项卡自动切换
- javascript 定时自动切换的选项卡Tab
- jquery自动切换tabs选项卡
- 单片机秒表程序（自动切换时间
- 左右自动切换的选项卡
- 用js写简单选项卡 加 自动切换效果
- 基于日出和日落时间自动切换到明/暗 Gtk 主题
- jQuery中setInterval()方法控制自动切换选项卡成功
- LabVIEW枚举类型控制选项卡自动切换
- jquery实现tab标签选项卡自动切换效果
- jquery自动切换tabs选项卡的具体实现
- 选项卡自动切换(定时器demo)
- HTML+JS+DOM【选项卡自动切换】
- div+css+js实现鼠标略过自动切换的选项卡
- 可自动定时切换的选项卡/滑动门导航代码
- tab选项卡切换效果（三）——自动切换加滑动切换