原生JS点击小图弹出大图代码

今天给大家带来的是原生js实现的点击指定图片弹出大图可切换可关闭

代码中有注释

function switchh(){
		var obox = document.getElementbyId("oobox");   
		var item = document.querySelectorAll(".oobox .obox_img");
		var radius = document.querySelectorAll(".switch_ruadiu .switch_white");
		//上面一块不做解释
		var indexx = 0;//当鼠标点击图片时能知道是那一张图片  在进行初显示
		radius.forEach(function(value,index){
			
			value.index=index;//给item附上index元素 根据index 跳转
			value.addEventListener("click",function(){ //给元素添加click事件
				value.classList.add("switch_red");		//添加class样式
				var ww=this.parentNode.children;		//寻找当前元素的父级下的所有子元素
				for(let i=0;i < radius.length;i++)		//下面这一块就像是jquery当中siblings(找到除自己以外的元素)元素一样
				{
					if(ww[i] !== this){		//如果父级下的元素不等于当前元素  删除switch_red元素
						ww[i].classList.remove("switch_red");
					}
				}
			
				item[index].classList.add("llefttin");//给第index元素添加样式
				item[index].classList.remove("rrightout");//给第index元素删除样式
			
				var ee= item[index].parentNode.children;//原理同上一样
				for (let w=0;w<item.length;w++) {
					
					if(ee[w] !==item[index]){
						
						ee[w].classList.add("rrightout");
						
					}
				}
				
				indexx=index   //将index 赋值给indexx
			})
			
		})
	
	
		function right(){
			
			indexx++; //在原基础上加一
			if(indexx >=12)
			{
				indexx = 0;
			}
			console.log(indexx);
			radius[indexx].classList.add("switch_red");
			var ww=radius[indexx].parentNode.children;
				for(let i=0;i < radius.length;i++)
				{
					if(ww[i] !== radius[indexx]){
						ww[i].classList.remove("switch_red");
					}
				}
			//先查找添加进入动画 
			item[indexx].classList.add("lleftin");
			item[indexx].classList.remove("rrightout");
			
			for (let a=0;a<item.length;a++) {
				var tt=item[indexx].parentNode.children
				if(tt[a] !== item[indexx]){
					tt[a].classList.add("rrightout");
				}
			}
			//
			//查找其他元素 
			//添加退出动画
		}
		var next = document.getElementsByClassName("switch_right")[0];
		next.addEventListener("click",right)
		
		
		var play_img = document.querySelectorAll(".obox_img");
		
		//关闭
		document.querySelector(".close").addEventListener("click",function(){
			obox.style.height="0";
			tt.style.height="0";
		})
		//点击之后弹出switch效果
		var tt= document.getElementById("tt");
		play_img.forEach(function(value,index){
			value.addEventListener("click",function(){
				obox.style.height="auto";
				tt.style.height="100%"
				indexx=index;
				indexx--;
				console.log(indexx);
				right();
			})
		})
	
		
	}

前端代码

		<div id="tt">
			    //这个div是那块黑色背景的元素
			</div>
			<div id="oobox">
				<div class="img_switch">
					<button class="close" >关闭</button>
					<div class="switch_switch">
						
						<li class="obox_img">
						<img src="../img/m1.jpg" width="800px" height="400px" />
						</li>
						<li class="obox_img">
							<img src="../img/m2.jpg"  width="800px" height="400px" />
						</li>
						<li class="obox_img">
							<img src="../img/m3.jpg"  width="800px" height="400px"/>
						</li>
						<li class="obox_img">
							<img src="../img/m5.jpg"  width="800px" height="400px" />
						</li>
						<li class="obox_img">
							<img src="../img/p1.jpg" width="800px" height="400px" />
						</li>
						<li class="obox_img">
							<img src="../img/r1.jpg"  width="800px" height="400px" />
						</li>
						<li class="obox_img">
							<img src="../img/r2.jpg"  width="800px" height="400px" />
						</li>
						<li class="obox_img">
							<img src="../img/r3.jpg"  width="800px" height="400px" />
						</li>
						<li class="obox_img">
							<img src="../img/oimg/p2.jpg"  width="800px" height="400px" />
						</li>
						<li class="obox_img">
							<img src="../img/oimg/p3.jpg"  width="800px" height="400px" />
						</li>
						<li class="obox_img">
							<img src="../img/oimg/p5.jpg"  width="800px" height="400px" />
						</li>
						<li class="obox_img">
							<img src="../img/obox/gl7.jpg"  width="800px" height="400px" />
						</li>
					</div>
					<div class="switch_htm">
						<div class="switch_left"><img src="../img/prev.png"/></div>
						<div class="switch_right"><img src="../img/next.png"/></div>
					</div>
					<div class="switch_ruadiu">
						<span class="switch_white switch_red"></span>
						<span class="switch_white"></span>
						<span class="switch_white"></span>
						<span class="switch_white"></span>
						<span class="switch_white"></span>
						<span class="switch_white"></span>
						<span class="switch_white"></span>
						<span class="switch_white"></span>
						<span class="switch_white"></span>
						<span class="switch_white"></span>
						<span class="switch_white"></span>
						<span class="switch_white"></span>
					</div>
				</div>
			</div>

css部分

#ww #oobox{
	position: absolute;
	width: 100%;
	height: 0;
	overflow: hidden;
	
	top: 0;
	left: 0;
}
#ww .img_switch{
	width: 800px;
	height: 400px;
	margin: 200px auto;
	position: relative;
}
#ww .img_switch .switch_switch{
	
}
#ww .img_switch .switch_switch .obox_img{
	position: absolute;
	top: 0px ;
	
}
#ww .img_switch .switch_left{
	position: absolute;
	top: 50%;
	left: 0;
}
#ww .img_switch .switch_right{
	position: absolute;
	top: 50%;
	right: 0;
}
@keyframes llefttin{
	from{
		transform: translateX(-100px);
	}
	to{
		
		transform: translateX(0px);
	}
}
@keyframes rrightout{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(100px);
	}
}
#ww .img_switch .switch_switch .obox_img.llefttin{
	animation: llefttin all;
	display: inline-block;
}
#ww .img_switch .switch_switch .obox_img.rrightout{
	animation: rrightout all;
	display: none;
}
.img_switch .switch_ruadiu{
	position: absolute;
	bottom: 0px;
	left:35%;
	width: 200px;
	height: 20px;
}

.img_switch .switch_ruadiu .switch_white{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid white;
	display: inline-block;
}
.img_switch .switch_ruadiu .switch_red{
	background: red;
}
.img_switch .close{
	
	position: absolute;
	top: 0;
	right: 0;
	z-index: 100;
}
#tt{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 0;
	opacity: 0.5;
	background: #000000;
	overflow: hidden;
}