今天给大家带来的是原生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;
}