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

Question

我正在尝试使用 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>

它工作正常，就像点击按钮时图像正在滚动，但我希望它可以无限循环滚动

Answer 1

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

• 对于 next 按钮，position 变量等于 -((旋转木马元素的数量 - 四个(应显示 4 张卡片))乘以元素的宽度) 通常 -((listElems.length - 4) * width) 然后将 0 分配给 position 因此轮播重新开始。
• 对于prev按钮，position变量等于0然后赋值给它-((轮播的编号元素 - 四(应显示 4 张卡片))乘以元素的宽度)。

这是一个演示:

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>