原生JS实现 --推拉门效果图片

效果图片如下:

css代码:

<style>
    *{
        margin:0;
        padding:0;
    }
     #box{
         width: 838px;
         position: relative;
         margin: 0 auto;
     }
    .img{
        position: absolute;
        width: 50px;
        top: 0;
        overflow: hidden;
    }
    .img.first{
        width: 538px;
    }
    .img:nth-of-type(1){
        left: 0;
    }
    .img:nth-of-type(2){
        left: 538px;
    }
    .img:nth-of-type(3){
        left: 588px;
    }
    .img:nth-of-type(4){
        left: 638px;
    }
    .img:nth-of-type(5){
        left: 688px;
    }
    .img:nth-of-type(6){
        left: 738px;
    }
    .img:nth-of-type(7){
        left: 788px;
    }
</style>

html代码:

<div id="box">
    <div class="img first"><img src="./img/1.jpg" alt=""></div>
    <div class="img"><img src="./img/2.jpg" alt=""></div>
    <div class="img"><img src="./img/3.jpg" alt="" ></div>
    <div class="img"><img src="./img/4.jpg" alt="" ></div>
    <div class="img"><img src="./img/5.jpg" alt=""></div>
    <div class="img"><img src="./img/6.jpg" alt=""></div>
    <div class="img"><img src="./img/7.jpg" alt=""></div>
</div>

JS代码:

<script>
    //获取标签class
    var pushs=document.getElementsByClassName("img");
  //效果实现
    for(var i=0;i<pushs.length;i++){
       pushs[i].index=i;//得到每一项的下标
       pushs[i].onmouseover=function() {//鼠标移入事件
           if(pushs[this.index].offsetWidth==50){//每一项当前的下标 距离左侧50px(前)
               //console.log(pushs[this.index]);
               for(var j=0;j<pushs.length;j++){//初始的每个div的zIndex=j（初始时）
                   pushs[j].style.zIndex=j;//按执行顺序 来获取z-index的值
               }
               for(var m=0;m<=this.index;m++){//其它的按执行顺序的下标（执行中）
                   pushs[m].style.width="538px";
                   pushs[m].style.left=50*m+"px";
               }
               this.style.zIndex=100;//当前的z-index=100；
           }else {//(后)
              for(var n=this.index+1;n<pushs.length;n++){//当前图片后面的宽度
                  pushs[n].style.width="50px";
                  pushs[n].style.left=50*(n-1)+538+"px";//每次执行left
              }
           }
       }
    }
</script>