展示效果

Posted 2020-11-22 xiaoyaolang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了展示效果相关的知识，希望对你有一定的参考价值。

小图展示大图

 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>