2移动到小图片切换大图片

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>

<style>

    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 800px;
        margin: 100px auto;
        overflow: hidden;
    }

    .tBox li {
        display: flex;
    }

    .tBox img {
        width: 800px;
    }

    .btn {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
    }

    .btn img {
        width: 120px;
        flex-shrink: 0;
    }

    .active {
        border: 5px solid green;
    }
</style>

</head> <body>

<div class="box">
    <ul class="tBox">
        <li>
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
            <img src="./img/6.jpg" alt="">
        </li>
    </ul>
    <div class="btn">
        <img class="active" src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
        <img src="./img/4.jpg" alt="">
        <img src="./img/5.jpg" alt="">
        <img src="./img/6.jpg" alt="">
    </div>
</div>



<script>
    // 2.鼠标移入小图标，切换对应的大图标
    // a 更改的是变量 参考三. 实现下面效果
    // b 更改透明度 参考四. 实现下面效果 
    var tBox = document.getElementsByClassName('tBox');
    var img1 = document.querySelectorAll('.btn img');
    console.log(img1, tBox);
    for (let i = 0; i < img1.length; i++) {
        img1[i].onmouseover = function () {
            for (var j = 0; j < img1.length; j++) {
                img1[j].classList.remove('active');
            }
            img1[i].classList.add('active');
            tBox[0].style.marginLeft = '-' + i * 800 + 'px';
        }
    }
</script>

</body>

posted on 2023-04-12 20:09 hqingxiang 阅读(38) 评论(0) 收藏举报