轮播右键单击按钮无法正常工作

Question

当我单击左键时，我有一个典型的轮播，如果 marginLeft 为 0，它不会滑动，但我不知道当我单击右键时为滑块设置什么限制值。

我尝试计算图像宽度和它们之间的边距空间以设置右侧按钮的限制值，因此滑块不会滑过它，但如果您在另一台设备上看到它，这将不起作用，因为它的宽度更高.

代码笔：https://codepen.io/anon/pen/bXBaYW?editors=1010

// caoursel
const carousel = document.getElementById('carousel');
const leftArrow = carousel.querySelector('.carousel-left-arrow');
const rightArrow = carousel.querySelector('.carousel-right-arrow');
const slides = carousel.querySelector('.slides');
const slideImgs = carousel.querySelectorAll('.slide img');

let marginLeft = 0;

// works fine
function scrollLeft() {
  if (getComputedStyle(slides).marginLeft >= '0px') return;
  marginLeft += 310;
  slides.style.marginLeft = marginLeft + "px";
}

// need to set right slide a limited value.
function scrollRight() {
  if (getComputedStyle(slides).marginLeft <= '-1240px') return; //  dont scroll past this value
  marginLeft -= 310;
  slides.style.marginLeft = marginLeft + "px";
}

leftArrow.addEventListener('click', scrollLeft);
rightArrow.addEventListener('click', scrollRight);

当我到达最后一张图片时，我希望滑块停止滑动。

Answer 1

您需要做的是不要在 CSS 和 JS 中硬编码 .slides 容器的宽度。 因此，您可以动态计算.slides 容器的宽度，以及您可以滚动/滑动的剩余空间。

下面是变量及其值相对于整个组件的说明。

remainingSpaceToScroll会告诉你右边有多少空间，所以你不能超过限制。它的值可以通过简单的数学计算得到，方法是从scrollWidth 中的值减去parentWidth 和currentScroll 的总和。

这是您示例中的代码已更新，以便您检查。 为了简单起见，我删除了幻灯片之间的空间。

https://codepen.io/anon/pen/BXpaNv

const carousel = document.getElementById("carousel");
const leftArrow = carousel.querySelector(".carousel-left-arrow");
const rightArrow = carousel.querySelector(".carousel-right-arrow");
const slides = carousel.querySelector(".slides");
const slideImgs = carousel.querySelectorAll(".slide img");

let marginLeft = 0;
let carouselImageWidth = 300;

function scrollLeft() {
  let parentWidth = carousel.offsetWidth;
  let scrollWidth = parseInt(getComputedStyle(slides).width, 10);
  let currentScroll = Math.abs(
    parseInt(getComputedStyle(slides).marginLeft, 10)
  );
  let remainingSpaceToScroll = currentScroll;

  if (remainingSpaceToScroll <= 0) {
    return;
  } else if (remainingSpaceToScroll >= carouselImageWidth) {
    marginLeft = -(currentScroll - carouselImageWidth);
  } else {
    marginLeft = -(currentScroll - remainingSpaceToScroll);
  }

  slides.style.marginLeft = marginLeft + "px";
}

function scrollRight() {
  let parentWidth = carousel.offsetWidth;
  let scrollWidth = parseInt(getComputedStyle(slides).width, 10);
  let currentScroll = Math.abs(
    parseInt(getComputedStyle(slides).marginLeft, 10)
  );
  let remainingSpaceToScroll = scrollWidth - (parentWidth + currentScroll);

  if (remainingSpaceToScroll <= 0) {
    return;
  } else if (remainingSpaceToScroll >= carouselImageWidth) {
    marginLeft = -(currentScroll + carouselImageWidth);
  } else {
    marginLeft = -(currentScroll + remainingSpaceToScroll);
  }

  slides.style.marginLeft = marginLeft + "px";
}

leftArrow.addEventListener("click", scrollLeft);
rightArrow.addEventListener("click", scrollRight);

以下 HTML：

<p>click right arrow till end</p>

<div id="carousel">
        <span class="carousel-left-arrow arrow">&lt;</span>
        <ul class="slides">
            <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
      <li class="slide">
      <a href="#">
                <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
            </a>
      </li>
        </ul>
        <span class="carousel-right-arrow arrow">&gt;</span>
    </div>

CSS 如下：

#carousel {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  overflow: hidden;
  position: relative;
  height: 122px;
}

#carousel .arrow {
  position: absolute;
  top: 32%;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #000;
  border-radius: 0%;
  cursor: pointer;
  width: 20px;
  z-index: 1;
}

#carousel .arrow img {
  margin-top: 10px;
  max-width: 100%;
}

#carousel .carousel-left-arrow {
  width: 25px;
  left: 0;
  margin-left: 5px;
}
#carousel .carousel-right-arrow {
  right: 0;
  width: 25px;
}

#carousel .slides {
  overflow: hidden;
  list-style: none;
  padding: 0;
  transition: 0.2s;
  margin-left: 0;
  margin-right: 0;
  border: 1px solid red;
  height: 120px;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  display: flex;
}
#carousel .slide {
  float: left;
  margin: 0;
  text-decoration: none;
  color: whitesmoke;
}

#carousel .slide > a {
  display: block;
}
#carousel .slides img {
  width: 300px;
  display: block;
}