前端模擬手機屏幕圖片漸隱漸現效果實現

　　在網站上，我們經常會看到這樣的效果，有一個IphoneX的手機屏幕，然后屏幕上會像真的一樣，會出現各種動畫效果，譬如圖片的漸隱漸現。今天我們就嘗試做一個這樣的效果。

　　HTML頁面結構大概是這樣子的：

  <main class="mobileBox">
    <div class="imgBox">
      <img src="./images/bg1.jpg" class="imgItem" alt="" srcset="">
      <img src="./images/bg2.jpg" class="imgItem" alt="" srcset="">
      <img src="./images/bg3.jpg" class="imgItem" alt="" srcset="">
      <img src="./images/bg4.jpg" class="imgItem" alt="" srcset="">
      <img src="./images/bg5.jpg" class="imgItem" alt="" srcset="">
    </div>
  </main>

　　其實很簡單，就是外邊一個box，我們把她的背景設置為手機的圖片，里邊的imgBox,用來存放圖片，圖片用absote定位，這樣幾張圖片就重合在一起，然后我們通過改變圖片的opaticy和z-index，就可以實現預期效果。

　　CSS代碼長這樣

.mobileBox {
  width: 454px;
  height: 618px;
  background-image: url(../images/mobile.png);
  background-size: 454px 618px;
  background-position: 0 0;
  position: relative;
}
.imgBox {
  padding: 99px 0 0 151px;
  position: relative;
}
.imgItem {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

.show,
.opacityTrans {
  opacity: 1;
  visibility: visible;
}
.opacityTrans {
  -webkit-transition: opacity 1.5s ease-in;
  transition: opacity 1.5s ease-in;
  z-index: 2;
}

　　我們就是通過改變圖片元素的類名來實現效果切換的。同一時刻，有且只有一張圖片的類是.show ,有且只有一張圖片的類是.opacityTrans .

　　JS代碼長這樣。

　　

window.onload = function() {
  var imgItems = document.querySelectorAll(".imgItem");
  var index = 0;
  var tem = 1;
//我們定義兩個變量，來控制show和opacityTrans類的交替，開始時，第一張顯示，第二張慢慢出現。
  imgItems[index].classList.add("show");
  imgItems[tem].classList.add("opacityTrans");
//定時器代碼
  setInterval(function() {
   
    imgItems[index].classList.remove("show");
    imgItems[tem].classList.remove("opacityTrans");
    index++;
    tem++;
//當達到最后一張時，邊界條件設置：回到第一張。總體就是從第0張到第imgItems.length - 1張，循環，所以我們用兩個變量，使邏輯更清晰。
    if(tem === 5){
      tem = 0; 
    };
    if(index === 5){
      index = 0;
    }
    imgItems[index].classList.add("show");
    imgItems[tem].classList.add("opacityTrans");
  }, 2000);
};

　　怎么樣，很簡單吧。