<!DOCTYPE html>
<html lang="zh-CN">
<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>在线相册管理器</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<ul class="container"></ul>
<script>
// 所有图片放到一个数组中
const imgs = [
"images/img-1.jpg",
"images/img-2.jpg",
"images/img-3.jpg",
"images/img-4.jpg",
"images/img-5.jpg",
"images/img-6.jpg",
"images/img-7.jpg",
"images/img-8.jpg",
];
// 动态生成图片
const ul = document.querySelector("ul");
// 当页面加载完成时将所有图片显示出来
window.onload = showImgs;
// 显示所有图片
function showImgs() {
// 使用数组迭代器来生成当前的图片元素
let res = imgs.reduce((prev, curr) => {
let tpl = `
<li>
<img src="${curr}" alt="" />
<div class="btns">
<button onclick="prev(this.parentNode.parentNode)">向前</button>
<button onclick="next(this.parentNode.parentNode)">向后</button>
<button onclick="del(this.parentNode.parentNode)">删除</button>
</div>
</li>
`;
// 最终结果是通过prev返回的, 因为返回是一个字符串
// 建议传入第二参数,设置prev初值
return prev + tpl;
}, "");
console.log(res);
// 插入到页面中
ul.insertAdjacentHTML("beforeEnd", res);
}
// 删除
function del(ele) {
// ele: 要被删除的元素参数
// if (confirm("是否删除")) {
// ele.remove();
// }
// 三元
return confirm("是否删除?") ? ele.remove() : false;
}
// 向前
function prev(ele) {
// 判断有没有前一个节点?
if (ele.previousElementSibling === null) {
alert("已经是第一张了");
return false;
}
let prevNode = ele.previousElementSibling;
// parentNode.insertBefore(插入元素,插入位置 )
ul.insertBefore(ele, prevNode);
}
// 向后
function next(ele) {
// 判断有没有下一个节点?
if (ele.nextElementSibling === null) {
alert("已经是最后一张了");
return false;
}
let nextNode = ele.nextElementSibling;
// parentNode.insertBefore(插入元素,插入位置 )
ul.insertBefore(nextNode, ele);
}
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
font-size: 1.6rem;
}
ul {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
li {
list-style: none;
width: 20rem;
border: 1px solid seagreen;
padding: 1rem 1rem 0;
margin-top: 1rem;
display: flex;
flex-flow: column nowrap;
}
li:hover {
background-color: lightcyan;
cursor: pointer;
}
li img {
width: 100%;
height: 100%;
}
li button {
background-color: seagreen;
color: white;
border: none;
outline: none;
margin: 0.2rem;
border-radius: 0.3rem;
height: 2rem;
cursor: pointer;
flex: 1;
}
li button:hover {
background-color: coral;
}
li .btns {
height: 4rem;
display: flex;
justify-content: space-around;
align-items: center;
}
