- A+
所属分类：Web前端
<head> <style> * { padding: 0; margin: 0; } ul{ list-style: none; overflow: hidden; } ul li{ float: left; width: 60px; height: 60px; margin-left: 30px; margin-top: 30px; border: 2px solid #da10a7b6; } ul li.active{ border-color:rgb(0, 255, 85); } </style> </head> <body> <img src="p/01.jpg" alt="从小变大的照片" id="bigImg" width="400px" height="400px"> <ul> <li class="active"> <a href=""> <img src="p/02.jpg" alt="从小变大的照片" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="p/03.jpg" alt="从小变大的照片" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="p/04.jpg" alt="从小变大的照片" width="46" class="smallImg"> </a> </li> <li> <a href=""> <img src="p/05.jpg" alt="从小变大的照片" width="46" class="smallImg"> </a> </li> </ul> <script> // 1.获取事件源 var bigImg = document.getElementById('bigImg'); var smallImgs = document.getElementsByClassName('smallImg'); for (var i = 0; i < smallImgs.length; i++) { // 遍历集合，给每个img标签添加事件 smallImgs[i].onmouseover = function () { // 将悬浮的每个li标签类名置为空 for (var j = 0; j < smallImgs.length; j++) { smallImgs[j].parentNode.parentNode.setAttribute('class', ''); } // 修改大图src属性 var smallImgSrc = this.getAttribute('src'); bigImg.setAttribute('src', smallImgSrc); // 给鼠标悬浮的img标签中的父标签添加类 this.parentNode.parentNode.setAttribute('class', 'active'); } } </script>
