页面切换特效（无依赖）

该效果主要解决从第一页切换到第二页的效果
1. 页面主要Dom结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <style>
     /*切换box*/
    .swiper-list {
      width: 300px;
      height: 240px;
      position: relative;
      overflow: hidden;
      padding: 0;
      float: left;
      margin-left: 10px;
      margin-bottom: 10px;
    }
    /* 切换页*/
    .swiper-slide {
      width: 300px;
      height: 240px;
      position: absolute;
      animation-fill-mode: forwards;
      list-style: none;
    }
    /*百叶窗box*/
    .shutter-box {
      display: none;
      width: 100%;
      height: 100%;
      left: 0;
      position: absolute;
    }
    /*切换页下的图片*/
    .swiper-slide img {
      width: 300px;
      height: 240px;
    }
    /*百叶窗的叶片*/
    .shutter-item {
      width: 100%;
      height: 100%;
      position: absolute;
      background-size: 100% 100%;
      left: 0;
    }
    /*淡入动画*/
    @keyframes swiperFadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    /*向上滑入*/
    @keyframes swiperTop {
      from {
        top: 100%;
      }

      to {
        top: 0;
      }
    }
    /*向左滑入*/
    @keyframes swiperLeft {
      from {
        left: 100%;
      }
      to {
        left: 0;
      }
    }
    /*向左放大滑入*/
    @keyframes swiperLeftScale {
      from {
        left: 100%;
        transform: scale(0.1);
      }

      to {
        left: 0;
        transform: scale(1);
      }
    }
    /*向左放大滑入*/
    @keyframes swiperTopScale {
      from {
        top: 100%;
        transform: scale(0.1);
      }
      to {
        top: 0;
        transform: scale(1);
      }
    }
    /*中心放大*/
    @keyframes swiperCenterScale {
      from {
        transform: scale(0);
      }
      to {
        transform: scale(1);
      }
    }
    /*左上放大滑入*/
    @keyframes swiperLeftTopScale {
      from {
        transform: scale(0);
        transform-origin: 0 0;
      }

      to {
        transform: scale(1);
        transform-origin: 0 0;
      }
    }
    /*左下放大滑入*/
    @keyframes swiperLeftBottomScale {
      from {
        transform: scale(0);
        transform-origin: 0 100%;
      }

      to {
        transform: scale(1);
        transform-origin: 0 100%;
      }
    }
    /*右上放大滑入*/
    @keyframes swiperRightTopScale {
      from {
        transform: scale(0);
        transform-origin: 100% 0;
      }
      to {
        transform: scale(1);
        transform-origin: 100% 0;
      }
    }
    /*右下放大滑入*/
    @keyframes swiperRightBottomScale {
      from {
        transform: scale(0);
        transform-origin: 100% 100%;
      }
      to {
        transform: scale(1);
        transform-origin: 100% 100%;
      }
    }
    /*百叶窗选中*/
    @keyframes swiperShutter {
      from {
        transform: rotateY(90deg);
      }
      to {
        transform: rotateY(0deg);
      }
    }
    </style>
  </head>
  <body onload='loads()'>
      <div class="my-swiper">
    <ul class="swiper-list">
      <li class="swiper-slide swiper0">
        <img src="./img/1.jpg" alt="">
      </li>
      <li class="swiper-slide swiper0">
        <img src="./img/2.jpg" alt="">
      </li>
      <li class="swiper-slide swiper0">
        <img src="./img/3.jpg" alt="">
      </li>
      <li class="swiper-slide swiper0">
        <img src="./img/4.jpg" alt="">
      </li>
      <li class="swiper-slide swiper0">
        <img src="./img/5.jpg" alt="">
      </li>
      <div id='shutterBox' class='shutter-box'></div>
    </ul>
</div>
      <script>
      function swiper(targetItem, ani, times, delays) {
        let target = 0
        const items = document.querySelectorAll(targetItem)
        if (items.length < 1) return;
        items[0].style.zIndex=2
        const len = items.length
        setInterval(function () {
          let targets = target + 1
          if (targets >= len) targets = 0
          items[targets].style.animation = ani + ' ' + (times / 1000) + 's linear forwards'
          setTimeout(() => {
            items[targets].style.animation = ''
            if (targets === 0) items[targets].style.zIndex = 2
            items[target].style.zIndex = 1
            target = targets
          }, times);
          if (targets === 0) items[targets].style.zIndex = 3
          else items[targets].style.zIndex = 2
        }, delays)
    }
    function appendShutter(target, doms) {
      const all = document.querySelectorAll('.shutter-item')
      all.forEach(function (item) {
        item.remove()
      })
      const rect = document.getElementById('shutterBox')
      rect.style.display = 'block'
      const width = rect.clientWidth
      const perWidth = width / 10;
      const perBoxCenter = width / 20;
      const height = rect.clientHeight
      for (let i = 0; i < 10; i++) {
        const _dom = doms.cloneNode(true)
        const childNode = document.createElement("div");
        childNode.setAttribute('class', 'shutter-item')
        childNode.style.transformOrigin = (i * perWidth + perBoxCenter) + 'px 0'
        childNode.style.clip = 'rect(0px, ' + ((i + 1) * perWidth) + 'px,' + height + 'px, ' + (i * perWidth) + 'px)'
        childNode.appendChild(_dom)
        target.appendChild(childNode)
      }
    }
    function swiperShutter(targetItem, times, delays) {
      let target = 0
      const items = document.querySelectorAll(targetItem)
       if (items.length < 1) return;
      appendShutter(document.getElementById('shutterBox'), items[0])
      document.getElementById('shutterBox').style.display = 'block'
      document.getElementById('shutterBox').style.zIndex = 4
      document.querySelectorAll('.shutter-item').forEach(function (items) {
        items.style.animation = 'swiperShutter ' + (times / 1000) + 's linear forwards'
      })
      document.querySelectorAll('.shutter-item')[0].style.zIndex = 0
      const len = items.length
      setInterval(function () {
        let targets = target + 1
        if (targets >= len) targets = 0
        items.forEach(function (i) {
          i.style.zIndex = 1
        })
        items[target].style.zIndex = 2;
        appendShutter(document.getElementById('shutterBox'), items[targets])
        document.querySelectorAll('.shutter-item').forEach(function (items) {
          items.style.animation = 'swiperShutter ' + (times / 1000) + 's linear forwards'
        })
        document.getElementById('shutterBox').style.zIndex = 4
        setTimeout(() => {
          document.getElementById('shutterBox').style.display = 'none'
          items[targets].style.zIndex = 3;
          if (targets === 0) {
            document.getElementById('shutterBox').style.zIndex = 1
          }
          target = targets
        }, times);
      }, delays)
    }
    function loads() {
         swiper('.swiper0', 'swiperTop', 1000, 5000) // 从下向上滑入
         // swiper('.swiper0', 'swiperLeft', 1000, 3000) // 从右向左滑入
         // swiper('.swiper0', 'swiperLeftScale', 1000, 2000) // 从右往左放大滑入
         // swiper('.swiper0', 'swiperTopScale', 1000, 4000) // 从下向上放大滑入
         // swiper('.swiper0', 'swiperCenterScale', 1000, 3000) // 中心放大滑入
         // swiper('.swiper0', 'swiperLeftTopScale', 1000, 3000) // 左上角放大滑入
         // swiper('.swiper0', 'swiperLeftBottomScale', 1000, 2000) // 左下角放大滑入
         // swiper('.swiper0', 'swiperRightTopScale', 1000, 4000) // 右上角放大滑入
         // swiper('.swiper0', 'swiperRightBottomScale', 1000, 3000)  // 右下角放大滑入
         // swiper('.swiper0', 'swiperFadeIn', 1000, 5000) // 淡入效果
         // swiperShutter('.swiper0', 1500, 4000)  // 百叶窗效果 （节点，动画时间，延迟时间）
        }      
      </script>
  </body>
</html>