十四、JS实现简单图片预览效果

xiaoxiao2021-02-28  23

整体思路图

一、首先写个div用于包含图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片预览</title> <style> *{margin: 0;padding: 0;} .block{ width: 800px; height:auto; border: 1px solid black; margin: 0 auto; } </style> </head> <body> <div class="block"></div> </body> </html>

二、使用dom操作动态创建图片,添加到界面中

知识点:1.document.createElement(元素名称)  创建一个元素

2.appendChild(添加的元素名) 此方法是向某个节点添加最后一个子节点

代码:<script> window.οnlοad=function(){ var block=document.getElementsByClassName("block")[0]; /*图片存储*/ var arrimg=["c-2_0ogx.jpg","1_a7or.jpg","c-3_vg6b.jpg","c-4_h340.jpg"]; /*创建图片*/ for(var i=0;i<12;i++){ //循环创建12个img,所以对img的操作不需要加索引; var img=document.createElement("img"); img.className="image"; block.appendChild(img); img.src="./image/"+arrimg[i%4]; } } </script>

并设置一下简单的样式:

.image{    width: 176px;    margin: 10px;    border: 2px solid white;    box-shadow: 1px 1px 5px grey;}.image:hover{    box-shadow: 8px 8px 10px grey;}

 

三、使用html创建出预览层以及预览图片框,并添加dom操作令其在点击图片时弹出,点击关闭键时关闭预览层

img.οnclick=function(){ var ceng=document.createElement("div"); ceng.className="ceng"; document.body.appendChild(ceng); /*创建关闭按钮*/ var close=document.createElement("span"); close.innerHTML="×"; close.className="close"; ceng.appendChild(close); /*close.addEventListener("click",function(){ ceng.remove(); }) //谷歌支持 IE不支持*/ close.addEventListener("click",function(){ document.body.removeChild(ceng); }) //创建预览框 var kuang=document.createElement("div"); kuang.className="kuang"; ceng.appendChild(kuang); //给创建的预览框添加 4个ul li var UL=document.createElement("ul"); UL.className="ulkuang"; kuang.appendChild(UL); for(var k=0;k<4;k++){ var list=document.createElement("li"); list.className="list"; var liimg=document.createElement("img"); liimg.className="liimg"; liimg.src="./image/"+src[k]; UL.appendChild(list); list.appendChild(liimg); /*调整图片层级*/ list.style.zIndex=3-k; }

注意点:创建预览图片时,由于这里只有4张图片,所以使用将4张图片叠加方式放到预览框中,注意的是图片默认会将最后一张显示在最上层,故需要通过图片的的层级即zIndex值来改变层级,令第一张为最上层方式显示;

UL要在预览层关闭后移除,不然会每次点击都创建一次,会导致后面左右翻页出现混乱;

 

四、JS实现左右翻页以及点击显示对应预览图

思路简图:

显示对应图片提前获取到点击图片的索引值,利用索引值计算需要轮转几次可以轮转到指定图片位置:

例如,点击第12张图,即第3行第4个,第四张的zIndex=0,需要让其zIndex=3则需要转3次,故可利用索引循环实现显示对应位置

/*任意点击一张显示对应的预览图*/ for (var b=0;b<this.index%4;b++) { //this.index===img.index; img.zIndex=i; shift("right"); }

完整代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>图片预览</title> <style> *{margin: 0;padding: 0;} .block{ width: 1000px; left: auto; margin: 0 auto; border: 1px solid black; } .imglist{ width: 200px; position: relative; border: 2px solid white; box-shadow: 1px 1px 5px grey; } .imglist:hover{ box-shadow: 8px 8px 10px grey; } .ceng{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); } .close{ position: absolute; right: 10px; top: 10px; color: white; } .close:hover{ color: red; cursor: pointer; } .kuang{ width: 400px; height: 600px; margin: 10px auto; border: 2px solid white; border-radius: 5%; position: relative; overflow: hidden; } .list{ width: 400px; height: 600px; position: absolute; list-style: none; overflow: hidden; } .liimg{ width: 400px; height: 600px; position: absolute; } .left{ position: absolute; top: 250px; left: 0; color: white; font-size:40px; font-weight: bold; z-index: 5; } .left:hover{cursor: pointer;} .right{ position: absolute; top:250px; right: 0; color: white; font-size: 40px; font-weight: bold; z-index: 5; } .right:hover{cursor: pointer;} </style> </head> <body> <div class="block"></div> <script> var src=["1_a7or.jpg","c-2_0ogx.jpg","c-3_vg6b.jpg","c-4_h340.jpg"]; for(var i=0;i<20;i++){ /*添加图片*/ var img=document.createElement("img"); img.src="./image/"+src[i%4]; img.className="imglist"; img.style.marginLeft="40px"; img.style.marginTop="20px"; document.getElementsByClassName("block")[0].appendChild(img); img.index = i; /*img点击时添加浮层*/ img.οnclick=function(){ var ceng=document.createElement("div"); ceng.className="ceng"; document.body.appendChild(ceng); /*创建关闭按钮*/ var close=document.createElement("span"); close.innerHTML="×"; close.className="close"; ceng.appendChild(close); /*close.addEventListener("click",function(){ ceng.remove(); }) //谷歌支持 IE不支持*/ close.addEventListener("click",function(){ document.body.removeChild(ceng); }) //创建预览框 var kuang=document.createElement("div"); kuang.className="kuang"; ceng.appendChild(kuang); //给创建的预览框添加 4个ul li var UL=document.createElement("ul"); UL.className="ulkuang"; kuang.appendChild(UL); for(var k=0;k<4;k++){ var list=document.createElement("li"); list.className="list"; var liimg=document.createElement("img"); liimg.className="liimg"; liimg.src="./image/"+src[k]; UL.appendChild(list); list.appendChild(liimg); /*调整图片层级*/ list.style.zIndex=3-k; } //添加左右控件 var spanleft=document.createElement("span"); spanleft.className="left"; spanleft.innerHTML="<"; kuang.appendChild(spanleft); spanleft.addEventListener("click",showshift); var spanright=document.createElement("span"); spanright.className="right"; spanright.innerHTML=">"; kuang.appendChild(spanright); spanright.addEventListener("click",showshift); //轮换的函数 function showshift(e) { if(e.target.className=="left"){ //对象target.className会返回left/right shift("left"); }else { shift("right"); } } function shift(way) { //传way控制向左还是向右翻 var Li=document.getElementsByClassName("list"); for(var j=0;j<Li.length;j++){ //获取一下 var zindex=parseInt(Li[j].style.zIndex); if(way=="left"){ //向左翻 给每个-1 小于0时 设置为3 再赋值 zindex-=1; if(zindex<0){ zindex=3; } }else { //向右翻 给每个+1 大于3时 设置为0 再赋值 zindex+=1; if(zindex>3){ zindex=0; } } Li[j].style.zIndex=zindex; } } /*任意点击一张显示对应的预览图*/ for (var b=0;b<this.index%4;b++) { //this.index===img.index; img.zIndex=i; shift("right"); } } } </script> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-2350236.html

最新回复(0)