小爱到底怎么了图展示大图
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="ima趣味运动会稿件ges/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].onmouover = function(){//排他思想，然所有的大图opacity为0 63 皮卡路发型 for(var j = 平安建设的主要内容0; j < tabs.length; j++){64 imgs[j].style.opacity = 0;65 }66 //让小图对应的大图，他的透明度为167 imgs[this.index].style.opacity = 1; 68 }69 } 70 </script>
本文发布于:2023-04-03 09:28:04，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/e66e489da5dfa9ce275ecfe3ab6e558f.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：展示效果.doc
本文 PDF 下载地址：展示效果.pdf
| 留言与评论（共有 0 条评论） |
