FIG carousel - using native FIG carousel js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图-不用jquery</title>
  <style>
    *{
      padding:0;
      margin:0;
    }
    .view{
      width: 1000px;
      height: 600px;
      margin: 0px auto;
      margin-top:30px;
      position: relative;
    }
    .view > ul{
      list-style: none;
      width: 100%;
      height: 100%;
      transform: rotate3d(1,1,0,0deg);
      transform-style: preserve-3d;

    }
    .view > ul > li{
      width: 20%;
      float: left;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform ;
      transition-duration: 0.5s;

    }
    .view > ul > li > span{
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top:0;
    }
    .view > ul > li > span:nth-of-type(1){
      background: url("./img/img1.jpg");
      transform: translateZ(300px);
    }
    .view > ul > li > span:nth-of-type(2){
      background: url("./img/img2.jpg");
      transform: translateY(-300px) rotate3d(1,0,0,90deg);
    }
    .view > ul > li > span:nth-of-type(3){
      background: url("./img/img3.jpg");
      transform: translateZ(-300px) rotate3d(1,0,0,180deg);
    }
    .view > ul > li > span:nth-of-type(4){
      background: url("./img/img4.jpg");
      transform: translateY(300px) rotate3d(1,0,0,-90deg);
    }
    .view > ul > li:nth-of-type(1) > span{
      background-position: 0,0;
    }
    .view > ul > li:nth-of-type(2) > span{
      background-position: -100%,0;
    }
    .view > ul > li:nth-of-type(3) > span{
      background-position: -200%,0;
    }
    .view > ul > li:nth-of-type(4) > span{
      background-position: -300%,0;
    }
    .view > ul > li:nth-of-type(5) > span{
      background-position: -400%,0;
    }
    .view > .button > a{
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      display: block;
      background: rgba(0,0,0,0.5);
      height: 50px;
      line-height: 50px;
      text-decoration: none;
      text-align: center;
      width: 50px;
      color: #fff;
      font-size: 30px;
    }
    .view > .button > a.pre{
      left:5px;
    }
    .view > .button > a.next{
      right:5px;
    }
  </style>
</head>
<body>
<div class="view">
  <ul>
    <li>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </li>
    <li>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </li>
    <li>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </li>
    <li>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </li>
    <li>
      <span></span>
      <span> </ span> 
      <span> </ span> 
      <span> </ span>forEach(function(value,key,arr){
          value.style.transform = `rotate3d(1,0,0,-${count*90}deg)`
    </li>
  </ul>
  <div class = "Button"> 
    <a href="javascript:void(0)" class="pre"> << / A> 
    <a href="javascript:void(0)" class="next">> </a> 
  </ div> 
</ div> 
<Script> 
  the window.onload = function () { 
    the let COUNT = 0 // clicks, click the angle according to the change 
    let flag = true // prevent multiple clicks 
    document.querySelector ( '.next'). onclick = function () {// Next click 
      IF (In Flag) { 
        In Flag to false = 
        COUNT ++ 
        var document.querySelectorAll Li = ( 'Li') 
        li.forEach (function (value, Key, ARR ) { 
          value.style [ 'Transition-Delay'] = + 0.1 * Key 'S'
        })
        setTimeout(function(){
          flag = true
        },800)
      }
    }
    document.querySelector('.pre').onclick = function(){ //点击上一页
      if(flag){
        flag = false
        count--
        var li = document.querySelectorAll('li')
        li.forEach(function(value,key,arr){
          value.style.transform = `rotate3d(1,0,0,-${count*90}deg)`
          value.style['transition-delay'] = key * 0.1 + 's'
        })
        setTimeout(function(){
          flag = true
        },800)
      }
    }
  }

</script>
</body>
</html>
FIG carousel - using native FIG carousel js

Guess you like
