効果
＃＃＃ 達成
一連の考え
- 親コンテナとその中に 2 つのサブコンテナがあります。2 つのサブコンテナはイメージ リスト コンテナとクリック後のプレビュー コンテナです。
- プレビュー コンテナにはマスク レイヤと画像ラベルが必要です。マスク レイヤは特定の画像をクリックすると表示されます
- マスク レイヤの左右に切り替えボタンがあります (ただし、境界条件に注意してください。最初のボタンには左矢印がなく、最後のボタンには右矢印がありません)。切り替えるときは、現在のパスを置き換えます。 image とターゲット画像のパス。
- 呼び出すことができるイベントをカスタマイズし
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>