Question

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

我尝试计算图像的宽度和它们之间的边距，以设置右键的极限值，以使滑块不会滑过它，但是如果您在其他设备上看到它，那是行不通的，因为它的宽度更大

codepen：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容器的宽度以及可以滚动/滑动的剩余空间。

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

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

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

1 个答案: