CSS代码
section {
display: flex;
}
div {
width: 430px;
height: 430px;
outline: 1px solid black;
overflow: hidden;
position: relative;
}
.bimg {
background-image: url("./images/bg.png");
background-repeat: repeat;
position: absolute;
}
JS代码
let imgArr = [
["./images/imgA_1.jpg", "./images/imgB_1.jpg", "./images/imgC_1.jpg"],
["./images/imgA_2.jpg", "./images/imgB_2.jpg", "./images/imgC_2.jpg"],
["./images/imgA_3.jpg", "./images/imgB_3.jpg", "./images/imgC_3.jpg"],
];
//创建页面结构
let bodyEle = document.getElementsByTagName("body")[0]
bodyEle.innerHTML = `
<article>
<section>
<div></div>
<div></div>
</section>
<section>
<input type="button" value="<">
<input type="button" value=">">
</section>
</article>
`;
let artEle = document.getElementsByTagName("article")[0];
secEles = artEle.children;
divEle1 = document.getElementsByTagName("div")[0];
divEle2 = document.getElementsByTagName("div")[1];
inpEle1 = document.getElementsByTagName("input")[0];
inpEle2 = document.getElementsByTagName("input")[1];
//创建中图片节点
let imgEleM = document.createElement("img");
divEle1.appendChild(imgEleM);
//创建大图片节点
let imgEleL = document.createElement("img");
imgEleL.style.position = "absolute";
divEle2.appendChild(imgEleL);
//用背景图方式就把上面img节点注释
divEle2.style.display = "none";
//生成三张小图片
function creatSmallPic() {
for (let index in imgArr[0]) {
let imgEleS = document.createElement("img");
imgEleS.setAttribute("src", imgArr[0][index])
secEles[1].insertBefore(imgEleS, inpEle2);
imgEleS.setAttribute("onclick", `changeIndex(${index})`);
if (index == 0) {
imgEleM.src = imgArr[1][0]
//img标签
imgEleL.src = imgArr[2][0]
//背景图
// divEle2.style.backgroundImage = `url(${imgArr[2][0]})`
}
}
}
creatSmallPic();
// 点击小图更换中图和大图
function changeIndex(index) {
i = index;
imgEleM.setAttribute("src", imgArr[1][i]);
//背景图
// divEle2.style.backgroundImage = `url(${imgArr[2][0]})`
//img标签
imgEleL.setAttribute("src", imgArr[2][i]);
imgEleM.dataset.index = i;
imgEleL.dataset.index = i
}
//上一张和下一张
let i = 0;
imgEleM.setAttribute("src", imgArr[1][i])
//背景图
// divEle2.style.backgroundImage = `url(${imgArr[2][i]})`
//img标签
imgEleL.setAttribute("src", imgArr[2][i])
inpEle1.addEventListener("click", e => {
if (i > 0) {
i--;
} else {
i = 2
}
imgEleM.setAttribute("src", imgArr[1][i])
//背景图
// divEle2.style.backgroundImage = `url(${imgArr[2][i]})`
//img标签
imgEleL.setAttribute("src", imgArr[2][i])
})
inpEle2.addEventListener("click", e => {
if (i < 2) {
i++;
} else {
i = 0;
}
imgEleM.setAttribute("src", imgArr[1][i])
//背景图
// divEle2.style.backgroundImage = `url(${imgArr[2][i]})`
//img标签
imgEleL.setAttribute("src", imgArr[2][i])
})
//生成蒙板
function meng() {
let divEle = document.createElement("div");
divEle.style.width = (430 / 800) * 430 + "px";
divEle.style.height = (430 / 800) * 430 + "px";
divEle.style.left = 0 + "px";
divEle.style.top = 0 + "px";
divEle.style.display = "none";
divEle.className = "bimg";
divEle1.appendChild(divEle)
}
meng();
// 蒙板的显示、隐藏、移动、大图的移动
divEle1.addEventListener("mouseover", e => {
let mengEle = document.getElementsByClassName("bimg")[0];
mengEle.style.display = "";
divEle2.style.display = "";
divEle1.addEventListener("mousemove", e => {
let event = e || window.event;
mengEle.style.left = event.clientX - divEle1.offsetLeft - mengEle.clientWidth / 2 + "px";
mengEle.style.top = event.clientY - divEle1.offsetTop - mengEle.clientHeight / 2 + "px";
if (parseInt(mengEle.style.left) <= 0) {
mengEle.style.left = 0
}
if (parseInt(mengEle.style.top) <= 0) {
mengEle.style.top = 0
}
if (parseInt(mengEle.style.left) >= divEle1.clientWidth - mengEle.clientWidth) {
mengEle.style.left = divEle1.clientWidth - mengEle.clientWidth + "px";
}
if (parseInt(mengEle.style.top) >= divEle1.clientHeight - mengEle.clientHeight) {
mengEle.style.top = divEle1.clientHeight - mengEle.clientHeight + "px";
}
//背景图模式
// divEle2.style.backgroundPositionX = -((800 / 430) * parseInt(mengEle.style.left)) + "px";
// divEle2.style.backgroundPositionY = -((800 / 430) * parseInt(mengEle.style.top)) + "px";
//img标签模式
imgEleL.style.left = -((800 / 430) * parseInt(mengEle.style.left)) + "px";
imgEleL.style.top = -((800 / 430) * parseInt(mengEle.style.top)) + "px";
})
divEle1.addEventListener("mouseout", e => {
mengEle.style.display = "none";
divEle2.style.display = "none";
})
})
效果图: