1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>lbt</title>
6 <style type="text/css">
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 #main_wnd #ctrl #nav{
12 list-style-type: none;
13 }
14 #main_wnd{
15 width: 506px;
16 height: 500px;
17 border: solid 1px red;
18 position: absolute;
19 }
20
21 #main_wnd #content div{
22 width: 500px;
23 height: 500px;
24 position: absolute;
25 }
26 #main_wnd #ctrl{
27 margin-top: 500px;
28 }
29 #main_wnd #ctrl li{
30 float: left;
31 width: 100px;
32 height: 30px;
33 text-align: center;
34 border-top: 1px solid #ccc;
35 border-right: 1px solid #ccc;
36 border-bottom: 1px solid #ccc;
37 }
38 </style>
39 </head>
40 <body>
41 <div id="main_wnd">
42 <div id="content">
43 <div>第一个</div>
44 <div>第二个</div>
45 <div>第三个</div>
46 <div>第四个</div>
47 <div>第五个</div>
48 </div>
49 <div id="ctrl">
50 <ul id="nav">
51 <li>一</li>
52 <li>二</li>
53 <li>三</li>
54 <li>四</li>
55 <li>五</li>
56 </ul>
57 </div>
58 </div>
59
60 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
61 <script type="text/javascript">
62
63 //将第一个li左边的border加上
64 $('#main_wnd #ctrl #nav li:first').css('border-left','1px solid #ccc');
65 //隐藏除了第一个的照片
66 $('#main_wnd #content div:not(:first)').css('display','none');
67 var bq = $('#main_wnd #ctrl #nav li');
68 var content = $('#main_wnd #content div');
69
70 //模仿鼠标悬浮在第一个li的情景
71 bq[0].style.borderTop = '1px solid #fff';
72
73
74 var i = 0;
75 //计时轮播
76 setInterval(function(){
77 $('#main_wnd #ctrl #nav li').css('border-top','1px solid #ccc');
78 bq[i].style.borderTop = '1px solid #fff';
79 content.css('display','none');
80 content[i].style.display = 'block';
81 i++;
82 if (i==5) {i=0;}
83 },2000)
84
85 //鼠标悬浮轮播
86 $('#main_wnd #ctrl #nav').mouseover(function(){
87 clearInterval();
88 var tg = event.target;
89 var idx = $(tg).index();
90 $('#main_wnd #ctrl #nav li').css('border-top','1px solid #ccc');
91 tg.style.borderTop = '1px solid #fff';
92 content.css('display','none');
93 content[idx].style.display = 'block';
94 });
95 </script>
96
97 </body>
98 </html>
