可以手动切换，另设置定时器可使其自动切换
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <style type="text/css">
8 *{
9 margin: 0;
10 padding: 0;
11 font-size: 12px;
12 font-family: "微软雅黑";
13 color: #000000;
14 text-decoration: none;
15 list-style-type: none;
16 }
17 #tab-list{
18 width: 275px;
19 height: 190px;
20 margin: 30px auto;
21 }
22 #list{
23 height: 32px;
24 border-bottom: #8B4513 2px solid;
25 }
26 #list li{
27 display: inline-block;
28 width: 60px;
29 border: 1px solid #999999;
30 border-bottom: none;
31 line-height: 30px;
32 margin-left: 5px;
33 text-align: center;
34 cursor: pointer;
35 }
36 #list .active{
37 border-top: 2px solid #8B4513;
38 border-bottom: 2px solid #fff;
39 }
40 #tab-list div{
41 border: 1px solid #7396B8;
42 border-top: none;
43 }
44 #tab-list div li{
45 height: 30px;
46 line-height: 30px;
47 text-indent: 8px;
48 }
49 #tab-list .show{
50 display: block;
51 }
52 #tab-list .hidden{
53 display: none;
54 }
55
56 </style>
57 <script type="text/javascript">
58 window.onload=function(){
59 var tab=document.getElementById(‘tab-list‘);
60 var list=document.getElementById(‘list‘).getElementsByTagName(‘li‘);
61 var div=tab.getElementsByTagName(‘div‘);
62 var timer=null;
63 var index=0;
64 for(var i=0;i<list.length;i++){
65 list[i].num=i;
66 list[i].onmouseover=function(){
67 Change(this.num);
68 }
69 }
70 function Change(curIndex){
71 for(var i=0;i<list.length;i++){
72 list[i].className="";
73 div[i].className="hidden";
74 }
75 list[curIndex].className="active";
76 div[curIndex].className="show";
77 index=curIndex;
78 }
79 //自动播放
80 function autoPlay(){
81 timer=setInterval(function(){
82 index++;
83 if(index > list.length - 1){
84 index=0;
85 }
86 Change(index);
87 },2000);
88 }
89 autoPlay();
90 tab.onmouseover=function(){
91 clearInterval(timer);
92 }
93 tab.onmouseout=function(){
94 autoPlay();
95 }
96 }
97 </script>
98 <body>
99 <div id="tab-list">
100 <ul id="list">
101 <li class="active">房产</li><li>家居</li><li>二手房</li>
102 </ul>
103 <div class="show">
104 <ul>
105 <li><a href="javascript:;">275万购昌平邻铁三居 总价20万买一居</a></li>
106 <li><a href="javascript:;">200万内购五环三居 140万安家东三环</a></li>
107 <li><a href="javascript:;">北京首现零首付楼盘 53万购东5环50平</a></li>
108 <li><a href="javascript:;">京楼盘直降5000 中信府 公园楼王现房</a></li>
109 </ul>
110 </div>
111 <div class="hidden">
112 <ul>
113 <li><a href="javascript:;">40平出租屋大改造 美少女的混搭小窝</a></li>
114 <li><a href="javascript:;">经典清新简欧爱家 90平老房焕发新生</a></li>
115 <li><a href="javascript:;">新中式的酷色温情 66平撞色活泼家居</a></li>
116 <li><a href="javascript:;">瓷砖就像选好老婆 卫生间烟道的设计</a></li>
117 </ul>
118 </div>
119 <div class="hidden">
120 <ul>
121 <li><a href="javascript:;">通州豪华3居260万 二环稀缺2居250w甩</a></li>
122 <li><a href="javascript:;">西3环通透2居290万 130万2居限量抢购</a></li>
123 <li><a href="javascript:;">黄城根小学学区仅260万 121平70万抛!</a></li>
124 <li><a href="javascript:;">独家别墅280万 苏州桥2居优惠价248万</a></li>
125 </ul>
126 </div>
127 </div>
128
129 </body>
130 </html>
时间： 2024-10-13 20:59:22