展示效果
小图展示大图
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>
