切割轮播图-节流阀（transitionend）

一、css

<style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .box {
      width: 560px;
      height: 380px;
      /* border: 1px solid #000; */
      margin: 100px auto;
      position: relative;
    }

    ul {
      width: 20%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateX(0deg);
      float: left;
    }

    ul:nth-child(2) li {
      background-position-x: -112px;
    }

    ul:nth-child(3) li {
      background-position-x: -224px;
    }

    ul:nth-child(4) li {
      background-position-x: -336px;
    }

    ul:nth-child(5) li {
      background-position-x: -448px;
    }

    li {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    li:nth-child(1) {
      background-image: url('images/01.jpg');
      transform: translateZ(190px)
    }

    li:nth-child(2) {
      background-image: url('images/02.jpg');
      transform: rotateX(90deg) translateZ(190px)
    }

    li:nth-child(3) {
      background-image: url('images/03.jpg');
      transform: rotateX(180deg) translateZ(190px)
    }

    li:nth-child(4) {
      background-image: url('images/04.jpg');
      transform: rotateX(270deg) translateZ(190px)
    }

    .prev,
    .next {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 50%;
      transform: translateY(-50%);
      background-color: #f91;
      text-decoration: none;
      color: #fff;
      text-align: center;
      line-height: 100px;
      font-size: 24px;
    }

    .prev {
      left: -100px;
    }

    .next {
      right: -100px;
    }
  </style>

二、html

<div class="box">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>

    <a href="javascript:;" class="prev">上一页</a>
    <a href="javascript:;" class="next">下一页</a>
  </div>

三、js

<script>
    var prev = document.querySelector('.prev')
    var next = document.querySelector('.next')
    var uls = document.querySelectorAll('ul')
    var count = 0

    // 表示现在可以执行动画
    var flag = true

    // 上一页功能
    prev.addEventListener('click', function () {
      if (flag) {
        flag = false;
        count++
        uls.forEach(function (ul, index) {
          ul.style.transform = "rotateX(" + count * 90 + "deg)"
          ul.style.transition = "1s " + 0.2 * index + "s"
        });
      }
      // setTimeout(function () {
      //   flag = true
      // }, 1000)
    })

    // 下一页功能
    next.addEventListener('click', function () {
      if(flag){
        flag = false;
        count--
        uls.forEach(function (ul, index) {
          ul.style.transform = "rotateX(" + count * 90 + "deg)"
          ul.style.transition = "1s " + 0.2 * index + "s"
        });
      }
    })


    // 给最后一个ul注册过渡结束事件 也就是节流阀，只有当最后一个ul的过渡效果结束时候点击下一页或                
    // 者上一页才有效
    uls[uls.length - 1].addEventListener('transitionend', function () {
      flag = true
    })
  </script>