收藏
PHPz批改状态：合格
老师批语：
图例
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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
