<style> .image-list { display: flex; /*设置flex布局*/ justify-content: space-around; /*设置图片左右对齐*/ align-items: center; /*设置图片垂直居中对齐*/ } .image-list img { width: 100px; /*设置图片宽度*/ height: 100px; /*设置图片高度*/ cursor: pointer; /*设置鼠标悬停光标效果*/ } .selected { border: 2px solid red; /*选中图片样式*/ } </style> <div class="image-list"> <img src="1.png" class="img-1" onclick="changeImage('.img-1')"> <img src="2.png" class="img-2" onclick="changeImage('.img-2')"> <img src="3.png" class="img-3" onclick="changeImage('.img-3')"> <img src="4.png" class="img-4" onclick="changeImage('.img-4')"> </div> <script> function changeImage(selector) { /* 获取所有图片 */ var images = document.getElementsByTagName('img'); /* 清除所有图片选中样式 */ for (var i = 0; i < images.length; i++) { images[i].classList.remove('selected'); } /* 给当前选中图片添加选中样式 */ var selectedImage = document.querySelector(selector); selectedImage.classList.add('selected'); } </script>
以上代码实现了一个图片切换效果。当点击图片时,图片会添加选中样式,同时其他图片的选中样式则会被清除。这个效果不仅美观,还非常实用。希望本文能帮助到大家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。