关于javascript:JS-实现-swiper

38次阅读

共计 3355 个字符，预计需要花费 9 分钟才能阅读完成。

<!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>demo</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    #swiper {
      width: 960px;
      height: 400px;
      position: relative;
      margin: 0 auto;
      overflow: hidden;
    }

    .swiper-container {
      position: absolute;
      height: 400px;
      left: 0;
      top: 0;
      display: flex;
      transition: all 0.3s;
      user-select: none;
      display: flex;
      align-items: center;
    }

    li {
      width: 300px;
      height: 300px;
      list-style: none;
    }

    li.magnify {transform: scale(1.1);
      transition: all 1s;
    }

    li.lessen {transform: scale(0.9);
      transition: all 1s;
    }

    li img {
      width: 300px;
      height: 300px;
    }

    li:not(last-child) {margin-right: 30px;}
  </style>
</head>

<body>
  <div id="swiper">
  </div>
</body>

<script>
  // 首先获取视图层元素
  const swiperEl = document.querySelector('#swiper');
  const createUl = document.createElement('ul')
  createUl.innerHTML = `
    <ul class="swiper-container">
      <li>
        <img draggable="false" src="./img/01.jpg" alt="">
      </li>
      <li>
        <img draggable="false" src="./img/02.jpg" alt="">
      </li>
      <li>
        <img draggable="false" src="./img/03.jpg" alt="">
      </li>
      <li>
        <img draggable="false" src="./img/04.jpg" alt="">
      </li>
      <li>
        <img draggable="false" src="./img/05.jpg" alt="">
      </li>
      <li>
        <img draggable="false" src="./img/06.jpg" alt="">
      </li>
      <li>
        <img draggable="false" src="./img/07.jpg" alt="">
      </li>
      <li>
        <img draggable="false" src="./img/08.jpg" alt="">
      </li>
      <li>
        <img draggable="false" src="./img/09.jpg" alt="">
      </li>
    </ul>`
  swiperEl.appendChild(createUl)

  // 在视图层里边查找容器元素
  const containerEl = swiperEl.querySelector('.swiper-container');
  let state = 0;  // 鼠标默认状态
  let index = 0
  let oldEvent = null;    // 用来记录鼠标上次的地位
  // 获取到所有的滑块元素
  const itemEls = containerEl.querySelectorAll('li');
  itemEls[1].classList.add('magnify')
  itemEls[0].classList.add('lessen')
  itemEls[2].classList.add('lessen')
  // 获取到滑块的宽度
  const itemWidth = itemEls[0].offsetWidth;
  // let left = containerEl.offsetLeft;
  // 存储容器的 left，这里咱们依据 index 来计算初始容器的 left 值
  let left = 0 - (itemWidth + 30) * index;
  // 设置容器的初始地位
  containerEl.style.left = left + 'px';
  containerEl.addEventListener('mousedown', (event) => {
    state = 1;  // 设置为 1 示意按下了鼠标
    startEvent = oldEvent = event;   // 当鼠标按下时候记录初始地位

  });
  containerEl.addEventListener('mousemove', (event) => {if (state != 1) return; // 只有当 state == 1 时候才容许执行该事件
    if (event.pageX < oldEvent.pageX) {left -= oldEvent.pageX - event.pageX;}
    else {left += event.pageX - oldEvent.pageX;}
    // 完事之后记得把以后鼠标的地位赋值给 oldEvent
    oldEvent = event;
    // 最初再把 left 赋值给容器
    containerEl.style.left = left + 'px';
  });
  containerEl.addEventListener('mouseup', (event) => {
    state = 0;  // 复原默认状态
    if (event.pageX < startEvent.pageX) {index++;}
    else {index--;}
    if (index < 0) {index = 0;}
    else if (index > itemEls.length - 3) {index = itemEls.length - 3;}
    left = 0 - (itemWidth + 30) * index;
    containerEl.style.left = left + 'px';
    animation(index)
  });

  // 自动播放状态
  let autoplay = true;

  setInterval(() => {if (!autoplay) return
    index++;
    if (index > itemEls.length - 3) {index = 0;}
    left = 0 - (itemWidth + 30) * index;
    containerEl.style.left = left + 'px';

    animation(index)
  }, 2000);
  containerEl.addEventListener('mouseover', () => {
    // 鼠标挪动到容器上，进行播放
    autoplay = false;
  });
  containerEl.addEventListener('mouseout', () => {
    // 鼠标从容器上移开，复原播放
    autoplay = true;
  });


  const animation = (index) => {for (let i = 0; i < itemEls.length; i++) {ADD_DELETE_ClASS('remove', i, 'magnify')
      ADD_DELETE_ClASS('remove', i, 'lessen')
    }
    ADD_DELETE_ClASS('add', index + 1, 'magnify')
    ADD_DELETE_ClASS('add', index, 'lessen')
    ADD_DELETE_ClASS('add', index + 2, 'lessen')
  }

  const ADD_DELETE_ClASS = (state, index, name) => {if (state === 'add') {return itemEls[index].classList.add(name)
    } else {itemEls[index].classList.remove(name)
    }
  }
</script>

</html>

正文完