中关村商城广告切换纯净代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <style type="text/css">  
  6.         /* 全局CSS定义 */   
  7.         body   
  8.         {   
  9.             font: 12px/20px simsun;   
  10.             color: #333;   
  11.             margin: 0;   
  12.         }   
  13.         div, form, img, ul, ol, li, dl, dt, dd, h1, h2   
  14.         {   
  15.             margin: 0;   
  16.             padding: 0;   
  17.             border: 0;   
  18.         }   
  19.         div, img, input, select, ul, dl, dt, dd   
  20.         {   
  21.             float: left;   
  22.         }   
  23.         h2   
  24.         {   
  25.             display: inline;   
  26.         }   
  27.         ul   
  28.         {   
  29.             list-style-type: none;   
  30.         }   
  31.         a   
  32.         {   
  33.             text-decoration: none;   
  34.             color: #333;   
  35.         }   
  36.         a:hover, div a:hover, .Alc dt a:hover   
  37.         {   
  38.             text-decoration: underline;   
  39.             color: #f60;   
  40.         }   
  41.         /* 颜色属性 */   
  42.         .bai12   
  43.         {   
  44.             color: #fff;   
  45.         }   
  46.         .hui6   
  47.         {   
  48.             color: #666;   
  49.         }   
  50.         .hui9   
  51.         {   
  52.             color: #999;   
  53.         }   
  54.         .hoc   
  55.         {   
  56.             color: #c00;   
  57.         }   
  58.         .lan12, .fa a, fia a   
  59.         {   
  60.             color: #36c;   
  61.         }   
  62.         .fal   
  63.         {   
  64.             font-family: arial;   
  65.         }   
  66.         .hoc12, .ho14b, .ho12b   
  67.         {   
  68.             color: #c00;   
  69.         }   
  70.         .lan12, .lan12i, .fa a, .lan14b, .lan14, .fia a, .A_back, .lan14bi   
  71.         {   
  72.             color: #36c;   
  73.         }   
  74.         .fi, .lan12i, .fia a, .A_back, .lan14bi   
  75.         {   
  76.             text-decoration: underline;   
  77.         }   
  78.         .b   
  79.         {   
  80.             font-weight: bold;   
  81.         }   
  82.         /* 滚动广告样式 */   
  83.         .Am_1   
  84.         {   
  85.             width: 540px;   
  86.             position: relative;   
  87.         }   
  88.         .Am_1 img   
  89.         {   
  90.             padding: 1px;   
  91.             border: 1px solid #D0E1F0;   
  92.         }   
  93.         .Am_1 ul   
  94.         {   
  95.             position: absolute;   
  96.             width: 135px;   
  97.             top: 0;   
  98.             right: 0;   
  99.             border-top: 1px solid #BED5EC;   
  100.             line-height: 16px;   
  101.         }   
  102.         .Am_1 li   
  103.         {   
  104.             width: 115px;   
  105.             padding: 11px 10px;   
  106.             height: 33px;   
  107.             float: left;   
  108.             background: url(http://icon.zol-img.com.cn/zol_mall/index/0905/a1.gif);   
  109.         }   
  110.         .Am_1 li.act   
  111.         {   
  112.             padding-left: 18px;   
  113.             height: 34px;   
  114.             background-position: 0 -60px;   
  115.             margin: -1px 0 -1px -8px;   
  116.             position: relative;   
  117.             color: #c00;   
  118.         }   
  119.         .Am_1 li.act a   
  120.         {   
  121.             color: #c00;   
  122.         }   
  123.         .Am_1 li.act a:hover   
  124.         {   
  125.             color: #f60;   
  126.         }   
  127.     </style>  
  128. </head>  
  129. <body>  
  130.     <div class="Am_1">  
  131.         <div style="width: 406px; height: 220px;" id="fc">  
  132.             <div style="display: none;">  
  133.                 <a title="佳能500D 1510万像素 超值套装低价抢购" target="_blank" href="http://www.zol.com/detail/1/goods_6b6de6c8b15a34fbf9bf7bf0861f9c1f.html">  
  134.                     <img border="0" src="http://admin.zol.com/article/picture/module/6_module_images/389.jpg"  
  135.                         onmouseout="setAuto()" onmouseover="clearAuto();" /></a></div>  
  136.             <div style="display: block;">  
  137.                 <a title="技嘉M1022中关村商城首发" target="_blank" href="http://www.zol.com/detail/6/goods_711e9a9bacc7e0fa529d6901052af061.html">  
  138.                     <img border="0" src="http://admin.zol.com/article/picture/module/6_module_images/386.gif"  
  139.                         onmouseout="setAuto()" onmouseover="clearAuto();" /></a></div>  
  140.             <div style="display: none;">  
  141.                 <a title="GARMIN 610 中关村商城 超低价促销" target="_blank" href="http://www.zol.com/detail/1/goods_6a7fc17474ae6786eb1525c8b0f90169.html">  
  142.                     <img border="0" src="http://admin.zol.com/article/picture/module/6_module_images/388.gif"  
  143.                         onmouseout="setAuto()" onmouseover="clearAuto();" /></a></div>  
  144.             <div style="display: none;">  
  145.                 <a title="卡巴斯基 全功能安全软件2010（三年版）" target="_blank" href="http://www.zol.com/detail/6/goods_f64fb5bd61088b47e5fa2e23d5a0bdf7.html">  
  146.                     <img border="0" src="http://admin.zol.com/article/picture/module/6_module_images/378.jpg"  
  147.                         onmouseout="setAuto()" onmouseover="clearAuto();" /></a></div>  
  148.         </div>  
  149.         <ul id="show_text">  
  150.             <li class=""><span onmouseout="setAuto()" onmouseover="clearAuto();Mea(0);"><a title="佳能500D 1510万像素 超值套装低价抢购"  
  151.                 target="_blank" href="http://www.zol.com/detail/1/goods_6b6de6c8b15a34fbf9bf7bf0861f9c1f.html">  
  152.                 佳能500D 1510万像素 超值套装低价抢购</a></span></li><li class="act"><span onmouseout="setAuto()"  
  153.                     onmouseover="clearAuto();Mea(1);"><a title="技嘉M1022中关村商城首发" target="_blank" href="http://www.zol.com/detail/6/goods_711e9a9bacc7e0fa529d6901052af061.html">  
  154.                         技嘉M1022中关村商城首发</a></span></li><li class=""><span onmouseout="setAuto()" onmouseover="clearAuto();Mea(2);">  
  155.                             <a title="GARMIN 610 中关村商城 超低价促销" target="_blank" href="http://www.zol.com/detail/1/goods_6a7fc17474ae6786eb1525c8b0f90169.html">  
  156.                                 GARMIN 610 中关村商城 超低价促销</a></span></li><li class="" style="margin-top: 0px;"><span  
  157.                                     onmouseout="setAuto()" onmouseover="clearAuto();Mea(3);"><a title="卡巴斯基 全功能安全软件2010（三年版）"  
  158.                                         target="_blank" href="http://www.zol.com/detail/6/goods_f64fb5bd61088b47e5fa2e23d5a0bdf7.html">  
  159.                                         卡巴斯基 全功能安全软件2010（三年版）</a></span></li></ul>  
  160.     </div>  
  161.   
  162.     <script type="text/javascript">  
  163.         var n = 0;   
  164.         var obj = document.getElementById("show_text");   
  165.         var fc = document.getElementById("fc");   
  166.         function Mea(v) {   
  167.             n = v;   
  168.             setBg(v);   
  169.             plays(v);   
  170.         }   
  171.         function setBg(v) {   
  172.             for (var i = 0; i < 4; i++) {   
  173.                 if (v == i) {   
  174.                     obj.getElementsByTagName("li")[i].className = "act";   
  175.                     if (v == 3) {   
  176.                         obj.getElementsByTagName("li")[3].style.marginTop = "-2px";   
  177.                     } else {   
  178.                         var p = obj.getElementsByTagName("li")[3].style.marginTop;   
  179.                         if (p == "-2px") {   
  180.                             obj.getElementsByTagName("li")[3].style.marginTop = "0px";   
  181.                         }   
  182.                     }   
  183.                 } else {   
  184.                     obj.getElementsByTagName("li")[i].className = "";   
  185.                 }   
  186.             }   
  187.         }   
  188.         function plays(v) {   
  189.             try {   
  190.                 with (fc) {   
  191.                     filters[0].Apply();   
  192.                     for (var i = 0; i < 4; i++) {   
  193.                         (i == v) ? children[i].style.display = "block" : children[i].style.display = "none";   
  194.                     }   
  195.                     filters[0].play();   
  196.                 }   
  197.             } catch (e) {   
  198.                 var d = document.getElementById("fc").getElementsByTagName("div");   
  199.                 for (var j = 0; j < 4; j++) {   
  200.                     (j == v) ? d[j].style.display = "block" : d[j].style.display = "none";   
  201.                 }   
  202.             }   
  203.         }   
  204.         function clearAuto() {   
  205.             clearInterval(autoStart);   
  206.         }   
  207.         function setAuto() {   
  208.             autoStart = setInterval("auto()", 2000);   
  209.         }   
  210.         function auto() {   
  211.             n++;   
  212.             if (n >= 4) n = 0;   
  213.             Mea(n);   
  214.         }   
  215.         setAuto();    
  216.     </script>  
  217.   
  218. </body>  
  219. </html>  
  • 大小: 55.4 KB
posted @ 2010-04-29 23:18  你妹的sb  阅读(268)  评论(0)  编辑  收藏  举报
百度一下