展示效果

2022-10-13,

小图展示大图

 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>

《展示效果.doc》

下载本文的Word格式文档,以方便收藏与打印。