小图展示大图
1 <style>
2 *{margin:0;padding:0;}
3 ul,ol{list-style:none;}
4 #box {
5 position:relative;
6 margin:100px auto;
7 border:1px solid #ccc;
8 width: 360px;
9 height:432px;
10 }
11 #box ul{
12 overflow: hidden;
13 border-top:1px solid #ccc;
14 position:absolute;
15 top:360px;
16 left:0;
17 width:360px;
18 }
19 #box li {
20 float: left;
21 border-top:none;
22 }
23 .bigImg{
24 width:360px;
25 height:360px;
26 background:red;
27 }
28 .bigImg li{
29 position:absolute;
30 top:0;
31 left:0;
32 }
33
34 </style>
35 </head>
36 <body>
37 <div id="box">
38 <ol class="bigImg" id="top1">
39 <li><img src="images/01big.jpg" alt=""/></li>
40 <li><img src="images/02big.jpg" alt=""/></li>
41 <li><img src="images/03big.jpg" alt=""/></li>
42 <li><img src="images/04big.jpg" alt=""/></li>
43 <li><img src="images/05big.jpg" alt=""/></li>
44 </ol>
45 <ul id="bottom">
46 <li><img src="images/01.jpg" alt=""/></li>
47 <li><img src="images/02.jpg" alt=""/></li>
48 <li><img src="images/03.jpg" alt=""/></li>
49 <li><img src="images/04.jpg" alt=""/></li>
50 <li><img src="images/05.jpg" alt=""/></li>
51 </ul>
52 </div>
53 </body>
54 </html>
55 <script>
56 var top1 = document.getElementById("top1");
57 var imgs = top1.getElementsByTagName("img");//大图
58 var bottom = document.getElementById("bottom");
59 var tabs = bottom.getElementsByTagName("img");//小图
60 for(var i = 0; i < tabs.length; i++){
61 tabs[i].index = i;//在一个小图上加个自定义属性，保存小图对应的下标
62 tabs[i].onmouseover = function(){//排他思想，然所有的大图opacity为0
63 for(var j = 0; j < tabs.length; j++){
64 imgs[j].style.opacity = 0;
65 }
66 //让小图对应的大图，他的透明度为1
67 imgs[this.index].style.opacity = 1;
68 }
69 }
70 </script>
