Javascript scrollBy的最佳替代品_Javascript_Html_Css

Javascript scrollBy的最佳替代品

javascript html css

Javascript scrollBy的最佳替代品,javascript,html,css,Javascript,Html,Css,我有一个旋转木马，我必须硬编码，我需要一些帮助。我想为手机制作幻灯片效果，但我找不到相册的替代品。scrollBy。如果查看代码，可以看到在touchMove上，我滚动旋转木马的父元素，但在触摸完成后，我转换旋转木马，相册保持滚动状态。所以我找到的唯一解决办法是在转换后删除滚动条，但看起来不太好。有什么想法吗这是carousel index.html <body> <div id="album" autoCall="true" class='album'>

我有一个旋转木马，我必须硬编码，我需要一些帮助。我想为手机制作幻灯片效果，但我找不到相册的替代品。scrollBy。如果查看代码，可以看到在

touchMove

上，我滚动旋转木马的父元素，但在触摸完成后，我转换旋转木马，相册保持滚动状态。所以我找到的唯一解决办法是在转换后删除滚动条，但看起来不太好。有什么想法吗

这是carousel 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>

下面是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();
  })
}

let album=document.getElementById（“album”）；
let carousel=document.getElementById（“carousel”）；
let seats=document.queryselectoral（“ul>li”）；
if（seats.length==1）
carousel.style.left=0；
班级下滑{
构造函数（）{
this.nextDisable=false；
this.prevDisable=false；
这个.startX=0；
这个.finalX=0；
这个.lastX=0；
this.didTheTouchMove=false；
}
goToNext（）{
this.nextDisable=true；
变量el，i，j，新座椅，参考；
el=文件查询选择器（“ul>li.is ref”）；
el.classList.remove（'is-ref'）；
新席位=el.NEXTELEMENTING同级席位[0]；
新建_seat.classList.add（'is-ref'）；
新_seat.style.order=1；
对于（i=j=2，ref=seats.length；（2）{
s、 startX=e.touchs[0].clientX；
s、 lastX=e.touchs[0].clientX；
})
carousel.addEventListener（“touchmove”，（e）=>{
scrollBy（s.lastX-e.touchs[0].clientX，0）；
s、 lastX=e.touchs[0].clientX；
})
carousel.addEventListener（“touchend”，（e）=>{
scrollBy（s.lastX-s.startX，0）；
s、 goToNext（）；
})
}

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();
  })
}