时间戳

首页 > 解决方案 > 可滚动的图片库循环在最后一张图片之后工作，它应该再次从第一张图片开始

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">⇦&lt;/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">⇨&lt;/button>
</div>

它工作得很好，就像点击按钮图像是 srcolling 但我希望它可以在无限循环中滚动

标签： javascript

解决方案

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)0position
  • 对于prev按钮，position变量等于0然后分配给它-((the number of the carousel elements - four (as 4 cards should be shown)) multiplied by the width of an element)。

这是一个演示：

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">⇦&lt;/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">⇨&lt;/button>
</div>

推荐阅读