图例
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>
