css实现点击图片切换效果代码

CSS实现点击图片切换效果并不难，下面是一个简单的例子：

    <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>

以上代码实现了一个图片切换效果。当点击图片时，图片会添加选中样式，同时其他图片的选中样式则会被清除。这个效果不仅美观，还非常实用。希望本文能帮助到大家。