javascript - 可滚动的图库循环工作，就像在最后一张图片之后一样，它应该再次从第一张图片开始

我正在尝试使用javascript创建可滚动的图像库，因此我能够创建它，但是现在我希望它像无限循环一样工作，即一旦到达最后一个图像，则在下一次单击时应该再次从第一个图像开始

那是我的HTML代码

var width = 130; // image width
var count = 4; // visible images count
var list = carousel.querySelector('ul');
var listElems = carousel.querySelectorAll('li');
var position = 0;

// shift left
document.querySelector('.prev').onclick = function() {
  position += width * count;
  position = Math.min(position, 0);
  list.style.marginLeft = position + 'px';
};

// shift right
document.querySelector('.next').onclick = function() {
  position -= width * count;
  position = Math.max(position, -width * (listElems.length - count));
  list.style.marginLeft = position + 'px';
};

.carousel {
  position: relative;
  width: 508px;
  padding: 10px 40px;
  border: 1px solid #CCC;
  border-radius: 15px;
  background: #eee;
}

.carousel img {
  width: 130px;
  height: 130px;
}

.arrow {
  position: absolute;
  top: 40%;
  padding: 0;
  background: #ddd;
  border-radius: 15px;
  border: 1px solid gray;
  font-size: 24px;
  line-height: 24px;
  color: #444;
}

.arrow:focus {
  outline: none;
}

.arrow:hover {
  background: #ccc;
  cursor: pointer;
}

.prev {
  left: 7px;
}

.next {
  right: 7px;
}

.gallery {
  width: 530px;
  overflow: hidden;
}

.gallery ul {
  height: 130px;
  width: 10000px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: margin-left 350ms;
  font-size: 0;
}

.gallery li {
  display: inline-block;
}

<div class="carousel" id="carousel">
  <button class="arrow prev">⇦</button>
  <div class="gallery">
    <ul class="images">
      <li><img src="https://en.js.cx/carousel/1.png"></li>
      <li><img src="https://en.js.cx/carousel/2.png"></li>
      <li><img src="https://en.js.cx/carousel/3.png"></li>
      <li><img src="https://en.js.cx/carousel/4.png"></li>
      <li><img src="https://en.js.cx/carousel/5.png"></li>
      <li><img src="https://en.js.cx/carousel/6.png"></li>
      <li><img src="https://en.js.cx/carousel/7.png"></li>
      <li><img src="https://en.js.cx/carousel/8.png"></li>
      <li><img src="https://en.js.cx/carousel/9.png"></li>
      <li><img src="https://en.js.cx/carousel/10.png"></li>
      <li><img src="https://en.js.cx/carousel/5.png"></li>
      <li><img src="https://en.js.cx/carousel/1.png"></li>
      <li><img src="https://en.js.cx/carousel/8.png"></li>
    </ul>
  </div>
  <button class="arrow next">⇨</button>
</div>

它工作正常，就像单击按钮上的图像一样，但是我希望它可以在无限循环中滚动

最佳答案

您可以通过在将position的变量分配给style.marginLeft之前进行检查来做到这一点：


对于next按钮，position变量通常等于-((the number of the carousel elements - four (as 4 cards should be shown)) multiplied by the width of an element)，然后将-((listElems.length - 4) * width)分配给0，以便轮播重新开始。
对于position按钮，prev变量等于position，然后为其分配0。


这是一个演示：

var width = 130; // image width
var count = 4; // visible images count
var list = carousel.querySelector('ul');
var listElems = carousel.querySelectorAll('li');
var position = 0;

// shift left
document.querySelector('.prev').onclick = function() {
  position += width * count;
  position = Math.min(position, 0);
  /** check if we have to loop back from the end **/
  position === 0 && (position = -((listElems.length - 4) * width));
  list.style.marginLeft = position + 'px';
};

// shift right
document.querySelector('.next').onclick = function() {
  position -= width * count;
  position = Math.max(position, -width * (listElems.length - count));
  /** check if we have to loop back from the begining **/
  position === -((listElems.length - 4) * width) && (position = 0);
  list.style.marginLeft = position + 'px';
};

.carousel {
  position: relative;
  width: 508px;
  padding: 10px 40px;
  border: 1px solid #CCC;
  border-radius: 15px;
  background: #eee;
}

.carousel img {
  width: 130px;
  height: 130px;
}

.arrow {
  position: absolute;
  top: 40%;
  padding: 0;
  background: #ddd;
  border-radius: 15px;
  border: 1px solid gray;
  font-size: 24px;
  line-height: 24px;
  color: #444;
}

.arrow:focus {
  outline: none;
}

.arrow:hover {
  background: #ccc;
  cursor: pointer;
}

.prev {
  left: 7px;
}

.next {
  right: 7px;
}

.gallery {
  width: 530px;
  overflow: hidden;
}

.gallery ul {
  height: 130px;
  width: 10000px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: margin-left 350ms;
  font-size: 0;
}

.gallery li {
  display: inline-block;
}

<div class="carousel" id="carousel">
  <button class="arrow prev">⇦</button>
  <div class="gallery">
    <ul class="images">
      <li><img src="https://en.js.cx/carousel/1.png"></li>
      <li><img src="https://en.js.cx/carousel/2.png"></li>
      <li><img src="https://en.js.cx/carousel/3.png"></li>
      <li><img src="https://en.js.cx/carousel/4.png"></li>
      <li><img src="https://en.js.cx/carousel/5.png"></li>
      <li><img src="https://en.js.cx/carousel/6.png"></li>
      <li><img src="https://en.js.cx/carousel/7.png"></li>
      <li><img src="https://en.js.cx/carousel/8.png"></li>
      <li><img src="https://en.js.cx/carousel/9.png"></li>
      <li><img src="https://en.js.cx/carousel/10.png"></li>
      <li><img src="https://en.js.cx/carousel/5.png"></li>
      <li><img src="https://en.js.cx/carousel/1.png"></li>
      <li><img src="https://en.js.cx/carousel/8.png"></li>
    </ul>
  </div>
  <button class="arrow next">⇨</button>
</div>

关于javascript - 可滚动的图库循环工作，就像在最后一张图片之后一样，它应该再次从第一张图片开始，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57593354/