相册管理学习

<!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;
}