轮播图--使用原生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>
    </li>
  </ul>
  <div class="button">
    <a href="javascript:void(0)" class="pre"><</a>
    <a href="javascript:void(0)" class="next">></a>
  </div>
</div>
<script>
  window.onload = function(){
    let count = 0 //点击次数，根据这个变化点击角度
    let flag = true //防止多次点击
    document.querySelector('.next').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)
      }
    }
    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>
轮播图--使用原生js的轮播图

猜你喜欢
