3d轮播 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet/less" href="./css/3d-style.less" />
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.2/less.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="slider-item current">
        <a href="#">
          <img
            src="https://img0.baidu.com/it/u=1644056367,3525368170&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
            alt=""
          />
        </a>
      </div>
      <div class="slider-item second left">
        <a href="#">
          <img
            src="https://img2.baidu.com/it/u=2673137634,2396156238&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
            alt=""
          />
        </a>
      </div>
      <div class="slider-item last">
        <a href="#">
          <img
            src="https://img1.baidu.com/it/u=949660977,962115085&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
            alt=""
          />
        </a>
      </div>
      <div class="slider-item second right">
        <a href="#">
          <img
            src="https://img1.baidu.com/it/u=1575223201,1912539385&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
            alt=""
          />
        </a>
      </div>
    </div>
  </body>
  <script>
    const oldSliderItems = document.querySelectorAll('.slider-item'),
      classNames = []
    console.log(oldSliderItems)
    let timer = null
    const init = () => {
      collectClassNames()
      sliderAction()
    }

    function collectClassNames() {
      let oldSliderItem = null
      for (let i = 0; i < oldSliderItems.length; i++) {
        oldSliderItem = oldSliderItems[i]
        classNames.push(oldSliderItem.className)
      }
    }
    function render() {
      let oldSliderItem = null
      for (let i = 0; i < oldSliderItems.length; i++) {
        oldSliderItem = oldSliderItems[i]
        oldSliderItem.className = classNames[i]
      }
    }
    function setClassNames() {
      classNames.unshift(classNames.pop())
      render()
    }
    function sliderAction() {
      timer = setInterval(setClassNames, 3000)
    }
    init()
  </script>
</html>

 

open with Live server

样式文件

./css/3d-style.less
.container {
  width: 1000px;
  height: 500px;
  margin: 100px auto;
  position: relative;
  .slider-item {
    position: absolute;
    box-shadow: 10px 20px 10px #666;
    transition: all 0.6s linear;
    img {
      display: block;
      width: 100%;
    }
    &.current {
      width: 600px;
      z-index: 3;
      transform: translate3d(200px, 80px, 0);
    }
    &.second {
      opacity: 0.6;
      z-index: 2;
      width: 400px;
      &.left {
        transform: translate3d(0, 138px, 0);
      }
      &.right {
        transform: translate3d(600px, 138px, 0);
      }
    }
    &.last {
      width: 300px;
      opacity: 0.4;
      z-index: 1;
      transform: translate3d(350px, 50px, 0);
    }
  }
}

 

posted @ 2022-01-19 19:03  云卷芸舒  阅读(43)  评论(0)    收藏  举报