展現效果

時間 2019-11-26

標籤展現效果简体版

原文原文鏈接

小圖展現大圖html

 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。