1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Document</title>
8 </head>
9 <style>
10 .box{
11 height:430px;
12 width:650px;
13 border:1px solid #000;
14 overflow:hidden;
15 }
16 li{
17 list-style: none;
18 }
19 img{
20 margin: 0;
21 width:650px;
22 height: 400px;
23 }
24 ul,ol{
25 margin: 0;
26 padding: 0;
27 }
28 .uls li{
29 float: left;
30 height: 32px;
31 width: 33.3%;
32 cursor:pointer;
33 text-align: center;
34 }
35 .ols li{
36 display: none;
37 }
38 .uls .main{
39 background-color:whitesmoke;
40 opacity: 0.5;
41 margin-bottom: 2px solid red;
42 transition: 0.5s;
43 font-size: 20px;
44
45 }
46 .ols .main{
47 display: block;
48 background-color: #CCC;
49 }
50 </style>
51 <body>
52 <div class="box">
53 <ul class='uls'>
54 <li class="main">Y</li>
55 <li>Q</li>
56 <li>H</li>
57 </ul>
58 <ol class="ols">
59 <li class="main"><img src="./images/a.jpg"></li>
60 <li><img src="./images/b.jpg"></li>
61 <li><img src="./images/c.jpg"></li>
62 </ol>
63 </div>
64 <script>
65 var arr1 = document.querySelectorAll('.uls li');
66 var arr2 = document.querySelectorAll('.ols li');
67 for( var i=0;i<arr1.length;i++){
68 arr1[i].index = i; //给arr1[i]设置一个index属性,值为i
69 arr1[i].onclick = function(){
70 for(var j=0;j<arr2.length;j++){
71 arr1[j].className = '';
72 arr2[j].className = '';
73 }
74 // console.log(this); //.uls li;
75 this.className = 'main';
76 arr2[this.index].className = 'main';
77 }
78 }
79 </script>
80 </body>
81 </html>
效果: