交互式图片预览-优快云博客

本文介绍了一个使用HTML、CSS及JavaScript实现的交互式图片预览功能。通过小图选择可以实时变换中图和大图的展示内容，并且支持前后翻页效果。同时，当鼠标在中图上移动时，会触发一个蒙版并带动大图的相应位置变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/normalize.css">
    <link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
    <article>
    </article>
    <script src="./jS/index.js"></script>
</body>
</html>

CSS样式

section:nth-child(1) {
    display: flex;
    width: 860px;
    height: 430px;
    box-sizing: border-box;
    margin: auto;
}

section:nth-child(1)>div {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid black;
}

section:nth-child(1)>div:nth-child(2) {
    background-image: url("../images/imgA_3.jpg");
    background-size: 800px;
    background-repeat: no-repeat;
    background-position: 0 0;
    display: none;
}

section:nth-child(2) {
    display: flex;
    width: 860px;
    margin: auto;
}

section:nth-child(2)>div {
    width: 60px;
    height: 60px;
    margin: 10px;
}

section:nth-child(2)>div:nth-child(2) {
    background-image: url("../images/imgA_1.jpg");
}

section:nth-child(2)>div:nth-child(3) {
    background-image: url("../images/imgB_1.jpg");
}

section:nth-child(2)>div:nth-child(4) {
    background-image: url("../images/imgC_1.jpg");
}

.box3 {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    opacity: 0.3;
    position: absolute;
}

.box1 {
    overflow: hidden;
    position: relative;
    background-image: url("../images/imgA_2.jpg");
}

JS代码

let areEle = document.querySelector("article");
let imgArr1 = ["./images/imgA_2.jpg", "./images/imgB_2.jpg", "./images/imgC_2.jpg"];
let imgArr2 = ["./images/imgA_3.jpg", "./images/imgB_3.jpg", "./images/imgC_3.jpg"];

//初始化小图、中图、大图（框架）
areEle.innerHTML =
    `<section>
        <div class="box1" data-index="0"></div>
        <div class="box2"></div>
    </section>
    <section>
        <input type="button" value='-'>
            <div data-index="0"></div>
            <div data-index="1"></div>
            <div data-index="2"></div>
        <input type="button" value='+'>
    </section>`;

let secEles = document.querySelectorAll("section");
secEles[1].addEventListener("click", smallimg);

//点击小图变换中图和大图
function smallimg(e) {
    //获取中图节点
    let box1Ele = document.getElementsByClassName("box1")[0];
    //获取大图节点
    let box2Ele = document.getElementsByClassName("box2")[0];
    let event = e || window.event;
    //判断是否点击的时小图
    if (event.target.localName == "div") {
        box1Ele.style.backgroundImage = `url(${imgArr1[event.target.dataset.index]})`;
        box2Ele.style.backgroundImage = `url(${imgArr2[event.target.dataset.index]})`;
        //给中图设置当前图片下标（用于前翻、后翻效果）
        box1Ele.dataset.index = event.target.dataset.index;
    }

    //判断是否向前翻
    if (event.target.value == "-") {
        //当前图片是否是第一张图片
        if (box1Ele.dataset.index == 0) {
            //满足条件，则点击“-”后显示最后一张图片
            box1Ele.dataset.index = imgArr1.length - 1;
        } else {
            box1Ele.dataset.index -= 1;
        }
        box1Ele.style.backgroundImage =
            `url(${imgArr1[box1Ele.dataset.index]})`;
        box2Ele.style.backgroundImage =
            `url(${imgArr2[box1Ele.dataset.index]})`;
    } else if (event.target.value == "+") { //判断是否向后翻
        //当前图片是否是最后一张图片
        if (box1Ele.dataset.index == imgArr1.length - 1) {
            //满足条件，则点击“+”后显示第一张图片
            box1Ele.dataset.index = 0;
        } else {
            box1Ele.dataset.index = box1Ele.dataset.index - 0 + 1;
        }
        box1Ele.style.backgroundImage =
            `url(${imgArr1[box1Ele.dataset.index]})`;
        box2Ele.style.backgroundImage = `url(${imgArr2[box1Ele.dataset.index]})`;
    }


}

//中图蒙板移动时，大图进行位置的变化
function newMeng() {
    let box1Ele = document.getElementsByClassName("box1")[0];
    let box2Ele = document.getElementsByClassName("box2")[0];

    box1Ele.style.position = "relative";
    box1Ele.innerHTML = `
    <aside></aside>`;

    //进行蒙板的设置
    let asideEle = document.querySelector("aside");
    asideEle.style.position = "absolute";
    asideEle.style.display = "none";
    asideEle.style.width = 430 / 800 * 430 + "px";
    asideEle.style.height = 430 / 800 * 430 + "px";
    asideEle.style.backgroundColor = "rgba(0,0,255,0.3)";

    //中图区域添加移入事件
    box1Ele.addEventListener("mouseover", function() {
        //鼠标移入中图（蒙板和大图显示）
        asideEle.style.display = "block";
        box2Ele.style.display = "block";

        //中图区域添加移动事件(鼠标移动，蒙板和大图移动)
        box1Ele.addEventListener("mousemove", function(e) {
            let event = e || window.event;
            /**
             * event.clientX 鼠标到浏览器的X轴位置
             * box1Ele.offsetLeft 中图到浏览器的X轴位置
             * asideEle.clientWidth蒙板的宽度
             */
            asideEle.style.left = event.clientX - box1Ele.offsetLeft - asideEle.clientWidth / 2 + "px";
            asideEle.style.top = event.clientY - box1Ele.offsetTop - asideEle.clientHeight / 2 + "px";

            //设置蒙板移动区域
            if (parseInt(asideEle.style.left) <= 0) {
                asideEle.style.left = 0;
            } else if (parseInt(asideEle.style.left) > box1Ele.clientWidth - asideEle.clientWidth) {
                asideEle.style.left = box1Ele.clientWidth - asideEle.clientWidth + "px";
            }

            if (parseInt(asideEle.style.top) <= 0) {
                asideEle.style.top = 0;
            } else if (parseInt(asideEle.style.top) > box1Ele.clientHeight - asideEle.clientHeight) {
                asideEle.style.top = box1Ele.clientHeight - asideEle.clientHeight + "px";
            }
            box2Ele.style.backgroundPositionX = -parseInt(asideEle.style.left) * (800 / 430) + "px";
            box2Ele.style.backgroundPositionY = -parseInt(asideEle.style.top) * (800 / 430) + "px";
        });

        //鼠标移除中图（蒙板和大图消失）
        box1Ele.addEventListener("mouseout", function() {
            box2Ele.style.display = "none";
            asideEle.style.display = "none";
        })
    });
}

newMeng();