* { margin:0; padding:0 } html,body { height:100% } body { width:100% } button { margin:50px 0px 0px 50%; width:100px; height:30px; border-radius:5px; background:linear-gradient(to left,#0054ff,#00e4ff); color:aliceblue; cursor:pointer } #imgLayer { display:none; z-index:5; position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.6); top:50%; left:50%; transform:translateX(-50%) translateY(-50%); } #imgBoxl { display:none; height:100%; z-index:6; position:fixed; margin:5%; } #bigimg { position:fixed; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); } ul ol { margin:20px }
页面样式就懒得写了,重点的功能,注释写的比较多,主要方便给新手查看
鼠标左右键可切换图片键盘左右键可切换图片点击空白区域关闭图片打开图库按钮可自行修改内容和样式如需添加图片只需要给js中的“imgurl”数组添加内容即可