JavaScript实现左右点击切换图片_javascript技巧_

/* 相册 */ #imgmax{     width: 600px;     height: 600px;     position: relative;     margin: 20px auto;           } img{     width: 100%;     height: 100%; } ui,li{     margin: 0;     padding: 0;     list-style: none;     float: left;     width: 150px;     height: 150px;     margin-left: 10px; } .newdiv{     width: 600px;     height: 600px;     background: #fff;     opacity: 0.5; } .newimg{     width: 300px;     height: 300px;     position: absolute;     left: 150px;     top: 50px; } .newspan{     position: absolute;     width: 20px;     height: 20px;     left: 450px;     top: 50px;     background: #fff;     text-align: center; } .newspanzuo{     position: absolute;     width: 20px;     height: 20px;     left: 100px;     top: 150px;     background: #fff;     text-align: center; }   .newspanyou{     position: absolute;     width: 20px;     height: 20px;     left: 480px;     top: 150px;     background: #fff;     text-align: center; }

/* 说明：根据<1i>标签、得到当前网页所有的<1i>元素返回值：返回的是数组，存储所有的<1i>元素 作用： 1.可用于监听点击事件 2.可根据当前<1i>元素得到内部存储的图片路径 3.可根据图片的路劲，做一个大图展示 */ var lis = document.getElementsByTagName("li"); //获取li标签 /* 说明：根据id，得到imgmax元素 返回值：返回的是最大的盒子元素 作用： 可像此盒子内【追用】预览图片时所需的所有【元素】 1.追加盒子元素（用于遮盖当前所有图片） 2.追加图片元素（用于展示【预览图】） 3.追加span文字（用于展示“X”,退出预览） */ var box = document.getElementById("imgmax"); //获取相册盒子 var index = 0; //循环遍历li标签 //迭代所有的【li】，用于监听【li】的点击事件 for (let i = 0; i < lis.length; i++) {     /*     当监听成功，绑定【匿名函数】，用于编写具体的逻辑     1.得到当前点击
元素的图片路径     2.创建：div元素，用于遮盖当前所有图片     3.创建：img元素，用于展示【预览图】     4.创建 span元素（用于展示“X”,退出预览）     */     lis[i].onclick = function() {         //弹出当前li标签中图片路径         //alert(this.getElementsByTagName("img")[0].src)         //2.创建：div元素，用于遮盖当前所有图片         // box.appendChild()         var j = i;         var newDiv = document.createElement('div');         newDiv.className = "newdiv";         box.appendChild(newDiv)                  //3.创建：img元素，用于展示【预览图】         var newImg = document.createElement("img");         newImg.className = "newimg"         newImg.src=this.getElementsByTagName("img")[0].src         box.appendChild(newImg);         //创建 span元素（用于展示“X”,退出预览）         var newSpan = document.createElement("span");         newSpan.innerHTML = "X";         newSpan.className = "newspan";         box.appendChild(newSpan);         newSpan.onclick = function(){             box.removeChild(newDiv);             box.removeChild(newImg);             box.removeChild(Spanz);             box.removeChild(Spany);             box.removeChild(newSpan);           }                  // 左边         var Spanz = document.createElement("span");         Spanz.innerHTML = "<";         Spanz.className = "newspanzuo";         box.appendChild(Spanz);         Spanz.onclick = function(){             if (j-->=0) {                 newImg.src=document.getElementsByTagName("img")[j].src             } else{                 alert("已经是第一张了！！")             }         }                  // 右边         var Spany = document.createElement("span");         Spany.innerHTML = ">";         Spany.className = "newspanyou";         box.appendChild(Spany);         Spany.onclick = function(){         if (j++