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");


let nextButton = document.createElement('button');
nextButton.id = "nextButton";
nextButton.innerHTML = "urm"
let prevButton = document.createElement('button');
prevButton.id = "prevButton";
prevButton.innerHTML = "prev"

album.appendChild(nextButton);
album.appendChild(prevButton);

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 个答案: