javascript - 让这些幻灯片循环播放？

Question

我已经为此工作了一段时间，但我认为我现在陷入了困境。

我制作了一个带有箭头的 div slider 。每个 div 幻灯片的 最小宽度 为 80px。

代码工作得很好，除了当我向左或向右导航时，它停在最后一项。我希望这个 slider 循环(就像无限地)，而不是在最后一项结束。

let buttonLeft = document.getElementById('slide_left')
    let buttonRight = document.getElementById('slide_right')

    buttonLeft.addEventListener('click', function() {
        document.getElementById('slider').scrollLeft -= 90
    })

    buttonRight.addEventListener('click', function() {
        document.getElementById('slider').scrollLeft += 90
    })

body{
            background-color: #555;
            height: 100vh;
            display: grid;
            align-items: center;
            justify-items: center;
            font-family: 'Helvetica';
        }
        
        div#slide_wrapper{
            width: 440px;
            display: flex;
            justify-content: space-between;
            height: fit-content;
        }
        
        div#slider{
            width: 350px;
            display: flex;
            height: fit-content;
            flex-wrap: nowrap;
            overflow: hidden;
        }
        
        div.thumbnail{
            min-width: 80px;
            min-height: 80px;
            cursor: pointer;
            display: grid;
            place-items: center;
            font-size: 30px;
        }

        div.thumbnail:not(:last-child){
            margin-right: 10px;
        }

        div.thumbnail:nth-child(1){
            background-color: darkturquoise;
        }
        div.thumbnail:nth-child(2){
            background-color: goldenrod;
        }
        div.thumbnail:nth-child(3){
            background-color: rebeccapurple;
        }
        div.thumbnail:nth-child(4){
            background-color: powderblue;
        }
        div.thumbnail:nth-child(5){
            background-color: firebrick;
        }
        div.thumbnail:nth-child(6){
            background-color: sienna;
        }
        div.thumbnail:nth-child(7){
            background-color: bisque;
        }
        div.thumbnail:nth-child(8){
            background-color: navy;
        }
        
        div#slide_wrapper > button{
            height: fit-content;
            align-self: center;
            font-size: 24px;
            font-weight: 800;
            border: none;
            outline: none;
        }
        
        div#slide_wrapper > button:hover{
            cursor: pointer;
            background-color: dodgerblue;
            color: #fff;
        }

<div id="slide_wrapper">
        <button id="slide_left" class="slide_arrow">&#10094;</button>
        <div id="slider">
            <div class="thumbnail active">1</div>
            <div class="thumbnail">2</div>
            <div class="thumbnail">3</div>
            <div class="thumbnail">4</div>
            <div class="thumbnail">5</div>
            <div class="thumbnail">6</div>
            <div class="thumbnail">7</div>
            <div class="thumbnail">8</div>
        </div>
        <button id="slide_right" class="slide_arrow">&#10095;</button>
    </div>

Answer 1

不错的 slider !有多种方法可以实现您想要的目标。在我看来，最简单的解决方案是使用一些 if 条件和计数器变量。一旦达到缩略图数量，请将计数器设置回 0。

更新

关于您的评论。 “对左箭头做同样的事情怎么样。”。在 if 条件 block 中: if (0 ==lideCount) { 我添加这些行:

    slideCount = thumbnail.length // set the slideCounter to maximum
    document.getElementById('slider').scrollLeft = slideCount * 90 // calculate the scroll distance
    slideCount--; // decrease slidecount
    setActive();  // set the red border on the current slide

const buttonLeft = document.getElementById('slide_left')
const  buttonRight = document.getElementById('slide_right')
const thumbnail = document.querySelectorAll(".thumbnail");
let slideCount = 0;
setActive();

buttonLeft.addEventListener('click', function() {
  if (0 == slideCount) {
    slideCount = thumbnail.length
    document.getElementById('slider').scrollLeft = slideCount * 90
    slideCount--;
    setActive();    
    return;
  }
  slideCount--;
  document.getElementById('slider').scrollLeft -= 90  
  setActive();
})

buttonRight.addEventListener('click', function() {
  slideCount++;
  if ( 8  ==  slideCount) {    
    document.getElementById('slider').scrollLeft = 0
    slideCount = 0;
  } else {
    document.getElementById('slider').scrollLeft += 90  
  }    
  setActive();
})

function setActive() {  
  thumbnail.forEach(t => {
    t.classList.remove("active");
  })
  thumbnail[slideCount].classList.add("active")
}


function count() {
  console.log(slideCount);
}

body{
  background-color: #555;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-items: center;
  font-family: 'Helvetica';
}

div#slide_wrapper{
  width: 440px;
  display: flex;
  justify-content: space-between;
  height: fit-content;
}

div#slider{
  width: 350px;
  display: flex;
  height: fit-content;
  flex-wrap: nowrap;
  overflow: hidden;
}

div.thumbnail{
  min-width: 80px;
  min-height: 80px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 30px;
}

div.thumbnail:not(:last-child){
  margin-right: 10px;
}

div.thumbnail:nth-child(1){
  background-color: darkturquoise;
}
div.thumbnail:nth-child(2){
  background-color: goldenrod;
}
div.thumbnail:nth-child(3){
  background-color: rebeccapurple;
}
div.thumbnail:nth-child(4){
  background-color: powderblue;
}
div.thumbnail:nth-child(5){
  background-color: firebrick;
}
div.thumbnail:nth-child(6){
  background-color: sienna;
}
div.thumbnail:nth-child(7){
  background-color: bisque;
}
div.thumbnail:nth-child(8){
  background-color: navy;
}

div#slide_wrapper > button{
  height: fit-content;
  align-self: center;
  font-size: 24px;
  font-weight: 800;
  border: none;
  outline: none;
}

div#slide_wrapper > button:hover{
  cursor: pointer;
  background-color: dodgerblue;
  color: #fff;
}

.active {
  border: 2px solid red;
}

<div id="slide_wrapper">
  <button id="slide_left" class="slide_arrow">&#10094;</button>
  <div id="slider">
    <div class="thumbnail active">1</div>
    <div class="thumbnail">2</div>
    <div class="thumbnail">3</div>
    <div class="thumbnail">4</div>
    <div class="thumbnail">5</div>
    <div class="thumbnail">6</div>
    <div class="thumbnail">7</div>
    <div class="thumbnail">8</div>
  </div>
  <button id="slide_right" class="slide_arrow">&#10095;</button>
</div>