旋转木马右键单击按钮无法正常工作

Question

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

我尝试计算图像宽度和它们之间的边距 space 来设置右键的限制值，这样滑块就不会滑过它，但如果你在另一个按钮上看到它，那将不起作用设备，因为它的宽度更高。

代码笔：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 容器的宽度，而剩余的 space 您可以 scroll/slide.

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

remainingSpaceToScroll会告诉你有多少space就对了，所以你不能超过限制。它的值可以通过简单的数学计算得出，方法是从 scrollWidth.

中的值减去 parentWidth 和 currentScroll 的总和

此处更新了示例中的代码，以便您进行检查。为简单起见，我删除了幻灯片之间的 space。

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

旋转木马右键单击按钮无法正常工作

Carousel right click button not working properly

javascript

carousel