旋转木马案例

news2024/11/13 15:12:25

旋转木马

如果接口需要的数据格式和原始数据提供的格式有差异

不要去改接口方法也不要改原始数据

做一层中间件(数据处理函数/方法)

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 旋转木马 </title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    img {
      display: block;
    }

    html,
    body {
      height: 100%;
    }

    ul {
      list-style: none;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .slider-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .pic-list {
      position: relative;
      width: 1200px;
      height: 600px;
    }

    .pic-list li {
      position: absolute;
      box-shadow: 0 0 4px #222;
    }

    .pic-list li img {
      width: 100%;
      height: 100%;
    }

    .btn-wrap span {
      position: absolute;
      top: -150px;
      bottom: 0;
      margin: auto;
      z-index: 2;
      width: 120px;
      height: 240px;
      line-height: 240px;
      text-align: center;
      font-size: 80px;
      background-color: rgba(0, 0, 0, .4);
      cursor: pointer;
      border-radius: 8px;
    }

    .btn-wrap span.prev {
      left: -120px;
    }

    .btn-wrap span.next {
      right: -120px;
    }
  </style>
</head>

<body>
  <div class="slider-wrap">
    <ul class="pic-list">
      <li><img src="images/re1.jpg" alt=""></li>
      <li><img src="images/re2.jpg" alt=""></li>
      <li><img src="images/re3.jpg" alt=""></li>
      <li><img src="images/re4.jpg" alt=""></li>
      <li><img src="images/re5.jpg" alt=""></li>
    </ul>
    <div class="btn-wrap">
      <span class="prev"> &lt; </span>
      <span class="next"> &gt; </span>
    </div>
  </div>
  <script src="js/common.js"></script>

  <script>
    var posData = [
      {
        zIndex: 0,
        top: -120,
        left: 80,
        width: 400,
        height: 250,
      },
      {

        zIndex: 1,
        top: 0,
        left: 0,
        width: 600,
        height: 375,
      },
      {

        zIndex: 2,
        top: 80,
        left: 200,
        width: 800,
        height: 500,
      },
      {

        zIndex: 1,
        top: 0,
        left: 600,
        width: 600,
        height: 375,
      },
      {

        zIndex: 0,
        top: -120,
        left: 720,
        width: 400,
        height: 250,
      }
    ];
    var oPic = $('.pic-list')
    var aLi = oPic.children
    var oBtn = $('.btn-wrap')

    posData = format(posData)
    translate()

    var tapMap = {
      'prev': function () {
        posData.push(posData.shift())
      },
      'next': function () {
        posData.unshift(posData.pop())
      },
    }
    
    oBtn.addEventListener('click', function (e) {
      if(e.target.tagName.toLowerCase() === 'span'){
        if(tapMap[e.target.className] && typeof tapMap[e.target.className] === 'function'){
          tapMap[e.target.className]()
          translate()
        }
      }
    }, false)

    function format() {
      return posData.map(function (item, idx) {
        var newData = {}
        for(var key in item) {
          if(key === 'zIndex') {
            newData[key] = item[key]
            continue
          }
          newData[key] = item[key] + 'px'
        }
        return newData
      })
    }

    function format (data) {
      return data.map(item => ({ 
        ...Object.fromEntries(Object.entries(item).map(([key, val]) => [key, val + 'px'])), 
        zIndex: item['zIndex'] 
      }))
    }

    function translate() {
      posData.forEach(function (item, idx) {
        animate (aLi[idx], item)
      })
    }
  </script>
</body>
</html>