Question

我有一个必须进行硬编码的轮播，需要一些帮助。我想为手机制作幻灯片效果，但是找不到album.scrollBy的替代品。如果您看一下代码，可以看到在touchMove上滚动了轮播的父元素，但是在触摸完成后，我对轮播进行了转换，并且专辑仍然滚动。因此，我发现的唯一解决方案是在过渡后删除滚动条，但效果并不理想。有什么想法吗？

这是轮播index.html

<body>
      <div id="album" autoCall="true" class='album'>
        <ul id="carousel" class='carousel is-set'>
          <li class='container carousel-element'>
              <img src="assets/img1.jpeg">
          </li>
          <li class='container carousel-element'>
              <img src="assets/img2.jpeg">
          </li>
          <li class='container carousel-element'>
              <img src="assets/img3.jpeg">
          </li>
          <li class='container carousel-element is-ref'>
              <img src="assets/img4.jpeg">
          </li>
        </ul>
        <div class="left-arrow"></div>
        <div class="right-arrow"></div>
      </div>
      <script src="SLID/js/index.js"></script>
    </body>

这是包含转换的CSS文件：

html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      scroll-behavior: smooth;
    }

    .album {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: auto;
      position: relative;
    }

    .carousel {
      height: 100%;
      width: 100%;
      display: flex;
      left: -100%;
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
    }

    .carousel.toNext {
      transform: translateX(100%);
    }

    .carousel.toPrev {
      transform: translateX(-100%);
    }

    .carousel.is-set {
      transform: none;
      transition: transform 0.5s cubic-bezier(0.215, 0.610, 0.355, 1);
    }

    .carousel-element {
      background: #ddd;
      flex: 1 0 100%;
      text-align: center;
      order: 2;
      position: relative;
      height: 100% !important;
      max-width: 100% !important;
      padding: 0;
    }

    .carousel-element:nth-child(even) {
      background: #d5d5d5;
    }

    .carousel-element.is-ref {
      order: 1;
    }

    .controls {
      padding: 2em;
      text-align: center;
    }

    .container {
      margin: 0 auto;
      height: 100%;
      width: 100%;
    }

    .carousel-element >img, video {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      max-width: 100%;
      max-height: 100%;
      margin: auto;
      padding: 0 !important;
    }

    .left-arrow,
    .right-arrow {
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 15%;
      color: #fff;
      text-align: center;
      opacity: .5;
      transition: opacity .15s ease
    }

.left-arrow {
  left: 0;
  background: red
}

.right-arrow {
  right: 0;
  background: blue;
}

这是JS文件：

let album = document.getElementById("album");
let carousel = document.getElementById("carousel");
let seats = document.querySelectorAll("ul > li");

if (seats.length === 1)
  carousel.style.left = 0;

class SLID {
  constructor() {
    this.nextDisable = false;
    this.prevDisable = false;
    this.startX = 0;
    this.finalX = 0;
    this.lastX = 0;
    this.didTheTouchMove = false;
  }

  goToNext() {
    this.nextDisable = true;
    var el, i, j, new_seat, ref;
    el = document.querySelector("ul > li.is-ref");
    el.classList.remove('is-ref');
    new_seat = el.nextElementSibling || seats[0];
    new_seat.classList.add('is-ref');
    new_seat.style.order = 1;
    for (i = j = 2, ref = seats.length; (2 <= ref ? j <= ref : j >= ref); i = 2 <= ref ? ++j : --j) {
      new_seat = new_seat.nextElementSibling || seats[0];
      new_seat.style.order = i;
    }
    carousel.classList.remove('toPrev');
    carousel.classList.add('toNext');
    carousel.classList.remove('is-set');
    document.getElementById('carousel').addEventListener("transitionend", () => {
      this.nextDisable = false;
    }, {
        once: true,
      });
    return setTimeout((function () {
      return carousel.classList.add('is-set');
    }), 50);
  }
  goToPrev() {
    this.prevDisable = true;
    var el, i, j, new_seat, ref;
    el = document.querySelector("ul > li.is-ref");
    el.classList.remove('is-ref');
    new_seat = el.previousElementSibling || seats[seats.length - 1];
    new_seat.classList.add('is-ref');
    new_seat.style.order = 1;
    for (i = j = 2, ref = seats.length; (2 <= ref ? j <= ref : j >= ref); i = 2 <= ref ? ++j : --j) {
      new_seat = new_seat.nextElementSibling || seats[0];
      new_seat.style.order = i;
    }
    carousel.classList.remove('toNext');
    carousel.classList.add('toPrev');
    carousel.classList.remove('is-set');
    document.getElementById('carousel').addEventListener("transitionend", () => {
      this.prevDisable = false;
    }, {
        once: true
      });
    return setTimeout((function () {
      return carousel.classList.add('is-set');
    }), 50);
  }
}
if (document.getElementById("album").getAttribute('autoCall') === "true") {
  let s = new SLID();


  document.addEventListener("keydown", (e) => {
    if (e.keyCode === 37)
      if (s.prevDisable === false)
        s.goToPrev();
    if (e.keyCode === 39)
      if (s.nextDisable === false)
        s.goToNext();
  })

  carousel.addEventListener("touchstart", (e) => {
    s.startX = e.touches[0].clientX;
    s.lastX = e.touches[0].clientX;
  })
  carousel.addEventListener("touchmove", (e) => {
    album.scrollBy(s.lastX - e.touches[0].clientX, 0);
    s.lastX = e.touches[0].clientX;
  })
  carousel.addEventListener("touchend", (e) => {
    album.scrollBy(s.lastX - s.startX, 0);
    s.goToNext();
  })
}

滚动的最佳替代

0 个答案: