css3 +JS: 缩略图库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root{
            --fade-time: 0.5s;
        }

        body{
            margin: 20px;
            padding: 0;
            background-color: #333;
        }
        .container{
            max-width: 760px;
            margin: 0 auto;
            border: #fff solid 3px;
            background-color: #fff;
        }

        .main-img img, .imgs img{
            width: 100%;
        }

        .imgs {
            display: grid;
            grid-template-columns: repeat(4,1fr);
            grid-gap: 5px;
        }

        .imgs img {
            cursor: pointer;
        }

        /* 设置主体图切换fade效果 */
        .fade-in{
            opacity: 0;
            animation: fadeIn var(--fade-time) ease-in 1 forwards;
        }

        @keyframes fadeIn {
            to{
                opacity: 1;
            }
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="main-img">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2694717687,3963200266&fm=26&gp=0.jpg" id="current"/>
        </div>
        <div class="imgs">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2694717687,3963200266&fm=26&gp=0.jpg">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1486368647,3634825947&fm=26&gp=0.jpg">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2201512185,1689448687&fm=26&gp=0.jpg">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=310968971,3044499661&fm=26&gp=0.jpg">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1413212373,1257003034&fm=26&gp=0.jpg">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3029870724,794847224&fm=26&gp=0.jpg">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2049572309,1993790486&fm=26&gp=0.jpg">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3290744356,2126119831&fm=26&gp=0.jpg">
        </div>
    </div>
    <script>
        // 获取节点
        const current = document.getElementById('current');
        const imgs = document.querySelector('.imgs');
        const img = document.querySelectorAll('.imgs img');

        const opacity = 0.6;

        img[0].style.opacity = opacity;

        //事件监听
        imgs.addEventListener('click',imgClick);

        function imgClick(e){
            //重置缩略图不透明度
            img.forEach(img => (img.style.opacity = 1));
            //点击下方缩略图更新上方的主体图
            current.src =e.target.src;
            //添加fadeIn类名
            current.classList.add('fade-in');
            //设置定时器移除类名
            setTimeout(() => {
              current.classList.remove('fade-in');  
            },500);
            // 设置点击的缩略图
            e.target.style.opacity = opacity;
        }



    </script>
</body>
</html>
所爱隔山海。
发布了356 篇原创文章 · 获赞 67 · 访问量 14万+
私信关注
猜你喜欢
