07-15作业：简单的相册管理器

图例

HTML+JS
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
     <div class="container">
 <ul>
     <li><img src="   " alt=""></li>
 </ul>
     </div>
       <script>
          //所以图片放在数组中
          const imgs = ["/img/1.jpg",
                         "/img /2.jpg",
                         "/img/3.jpg",
                         "/img/4.jpg",
                         "/img/5.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="prev(this.parentNode.parentNode)">向后</button>
                        <button onclick="del(this.parentNode.parentNode)">删除</button>    
                    </div>
                    </li>
                    `;
                    //最终结果是通过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 prve(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>

更多相关文章

随机推荐