效果
### 实现
思路
- 有一个父容器，里面两个子容器，两个子容器分别为图片列表容器和点击之后预览的容器；
- 预览的容器需要一个遮罩层一个图片标签；点击某张图片时遮罩层才出来
- 遮罩层左右会有切换的按钮（但是注意边界条件，第一张没有左箭头，最后一张没有右箭头）；切换时就把当前图片的路径换成目标图片的路径；
- 自定义一个事件，可以叫
preview，监听这个事件来控制是否触发； - 图片路径换成自己的；
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片查看器</title>
<style>
body {
padding: 0;
margin: 0;
position: relative;
height: 100vh;
}
ul {
list-style: none;
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0px;
height: 100%;
width: 100%;
}
ul img {
width: 100px;
}
#mask {
height: 100%;
width: 100%;
background-color: rgba(1, 1, 1, 0.5);
text-align: center;
position: absolute;
top: 0;
left: 0;
display: none;
}
.preview {
display: block;
/* display: inline-block; */
color: white;
font-size: 300%;
position: absolute;
top: 50vh;
left: 0;
float: left;
}
.next {
display: block;
/* display: inline-block; */
color: white;
font-size: 300%;
position: absolute;
top: 50vh;
right: 0;
float: right;
}
</style>
</head>
<body>
<ul id="list">
<li><img src="../../pictures/mmexport1649928066941.jpg" alt=""></li>
<li><img src="../../pictures/mmexport1649927142313.jpg" alt=""></li>
<li><img src="../../pictures/mmexport1649927128631.jpg" alt=""></li>
<li><img src="../../pictures/mmexport1649927124536.jpg" alt=""></li>
<li><img src="../../pictures/mmexport1649927131843.jpg" alt=""></li>
</ul>
<div id="mask">
<span class="preview">
< </span>
<img src="" alt="" width="300px">
<span class="next"> > </span>
</div>
</body>
<script type="text/javascript">
const imgList = document.getElementById('list');
let imgs = document.querySelectorAll('ul img');
function setPreviewBehavior(subjects) {
let previewEvent = document.createEvent('Event');
previewEvent.initEvent('preview', true, true);
if (!Array.isArray(subjects)) {
if (subjects.length) subjects = Array.from(subjects);
else subjects = [subjects];
}
previewEvent.previewTarget = subjects.map(evt => {
return evt.src;
});
subjects.forEach(subject => {
subject.preview = function () {
subject.dispatchEvent(previewEvent);
}
});
}
setPreviewBehavior(imgs);
const previewMask = document.getElementById('mask');
let previewImage = previewMask.querySelector('img');
let previewPrevious = previewMask.querySelector('.preview');
let previewNext = previewMask.querySelector('.next');
previewMask.addEventListener('click', evt => {
if (evt.target === previewMask) {
evt.target.style.display = 'none';
}
});
imgList.addEventListener('click', evt => {
if (evt.target.preview) {
evt.target.preview();
}
});
imgList.addEventListener('preview', evt => {
const src = evt.target.src,
imgs = evt.previewTarget;
previewMask.style.display = 'block';
previewImage.src = src;
let idx = imgs.indexOf(src);
function updateButton(idx) {
previewPrevious.style.display = idx ? 'block' : 'none';
previewNext.style.display = idx < imgs.length - 1 ? 'block' : 'none';
}
updateButton(idx);
previewPrevious.onclick = function (evt) {
previewImage.src = imgs[--idx];
updateButton(idx);
};
previewNext.onclick = function (evt) {
previewImage.src = imgs[++idx];
updateButton(idx);
}
})
</script>
</html>