zoukankan      html  css  js  c++  java
  • 选项卡固定时间自动切换

    <!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 { 235px ; height:300px ; float:left }
      .index_yp_card { 235px ; height:37px ; float:left }
       .yp_card_0, .yp_card_2, .yp_card_4 { 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 { 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 { 215px ; height:262px ; float:left ; border:1px solid #71B3C6 ; border-top:0px!important ; padding:0px 9px 0px 9px }
       .yp_main_content { 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 { 201px;height:13px;float:left;font-weight:normal;margin:0px;font-size:12px;padding-top:2px}
       .yp_main_content dd { 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 { 215px ; float:left }
     #index_m2_ad { 690px ; height:100px ; padding:5px 0px 0px 5px ; float:left }

  • 相关阅读:
    hdu1285 确定比赛名次(拓扑排序多种方法)
    软件配置管理中的SVN
    Maven实战(插件管理)
    oracle 数据库中,应用程序里的连接探測语句的正确使用
    2014百度之星资格赛第四题
    android制作闪动的红心
    程序猿生存定律-借势的价值与力量
    [SPOJ VLATTICE]Visible Lattice Points 数论 莫比乌斯反演
    机器学习:神经网络之表达
    【JavaScript】在同一个网页中实现多个JavaScript特效
  • 原文地址:https://www.cnblogs.com/luluping/p/1210652.html
Copyright © 2011-2022 走看看