將此幻燈片轉換為回圈播放？

我制作了一個帶箭頭的 div 滑塊，每個 div 的最小寬度設定為60px。

代碼作業得很好，除了當我用箭頭向左或向右導航時，它停在最后一項。我希望它回圈（如無休止地）。而不是停在最后一項。

let rightArrow = document.getElementById('right')
rightArrow.onclick = function() {
  let container = document.getElementById('box')
  sideScroll(container, 'right', 25, 80, 10)
}

let leftArrow = document.getElementById('left')
leftArrow.onclick = function() {
  let container = document.getElementById('box')
  sideScroll(container, 'left', 25, 80, 10)
}

function sideScroll(element, direction, speed, distance, step) {
  // body...
  scrollAmount = 0

  let slideTimer = setInterval(function() {
    // body...
    if (direction == 'left') {
      element.scrollLeft -= step
    } else {
      element.scrollLeft  = step
    }

    scrollAmount  = step

    if (scrollAmount >= distance) {
      window.clearInterval(slideTimer)
    }
  }, speed)
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #efefef;
  width: 100%;
  height: 100vh;
  background-image: radial-gradient(circle, #2196f3, #3f51b5);
  font-family: 'Nirmala UI';
  display: grid;
  place-items: center;
}

div.main {
  position: relative;
  background-color: #fff;
  border-radius: 10px;
}

div.main div.item_div {
  width: 300px;
  overflow: auto;
  display: flex;
}

div.main div.item_div::-webkit-scrollbar {
  display: none;
}

div.main div.item_div div.item {
  min-width: 60px;
  min-height: 60px;
  border-radius: 10px;
  background-color: grey;
  display: grid;
  place-items: center;
  font-size: 40px;
  text-transform: uppercase;
  scroll-behavior: smooth;
  user-select: none;
}

div.main div.item_div div.item:not(:last-child) {
  margin-right: 20px;
}

div.arrow {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
}

div#left {
  left: -60px;
}

div#right {
  right: -60px;
}

div.arrow span {
  font-size: 20px;
  user-select: none;
}

div.arrow:hover {
  cursor: pointer;
}

<div class="main">
  <div class="item_div" id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="arrow" id="left"><span>&#10094;</span></div>
  <div class="arrow" id="right"><span>&#10095;</span></div>
</div>

誰能幫我嗎？請？

uj5u.com熱心網友回復：

您可以scrollLeft檢查滾動條的位置并將滾動條相應地移動到開始或結束。

我使用注釋突出顯示了我對代碼所做的更改

let rightArrow = document.getElementById('right')
rightArrow.onclick = function() {
  let container = document.getElementById('box')
  //check if the scrollbar is located at the end and reset it to starting position
  if (container.scrollLeft == container.scrollWidth - container.offsetWidth) {
    sideScroll(container, 'left', 10, container.scrollWidth, 20)
  } else {
     sideScroll(container, 'right', 25, 80, 10)
  }
  
}

let leftArrow = document.getElementById('left')
leftArrow.onclick = function() {
  let container = document.getElementById('box')
  //check if the scrollbar is located at the start and reset it to ending position
  if (container.scrollLeft == 0) {
      sideScroll(container, 'right', 10, container.scrollWidth, 20)
  } else {
      sideScroll(container, 'left', 25, 80, 10)
  }
  
}

function sideScroll(element, direction, speed, distance, step) {
  // body...
  scrollAmount = 0
  

  let slideTimer = setInterval(function() {
    // body...
    if (direction == 'left') {
      element.scrollLeft -= step
    } else {
      element.scrollLeft  = step
    }
    
    

    scrollAmount  = step
    
    

    if (scrollAmount >= distance) {
      window.clearInterval(slideTimer)
    }
  }, speed)
  
  
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #efefef;
  width: 100%;
  height: 100vh;
  background-image: radial-gradient(circle, #2196f3, #3f51b5);
  font-family: 'Nirmala UI';
  display: grid;
  place-items: center;
}

div.main {
  position: relative;
  background-color: #fff;
  border-radius: 10px;
}

div.main div.item_div {
  width: 300px;
  overflow: auto;
  display: flex;
}

div.main div.item_div::-webkit-scrollbar {
  display: none;
}

div.main div.item_div div.item {
  min-width: 60px;
  min-height: 60px;
  border-radius: 10px;
  background-color: grey;
  display: grid;
  place-items: center;
  font-size: 40px;
  text-transform: uppercase;
  scroll-behavior: smooth;
  user-select: none;
}

div.main div.item_div div.item:not(:last-child) {
  margin-right: 20px;
}

div.arrow {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
}

div#left {
  left: -60px;
}

div#right {
  right: -60px;
}

div.arrow span {
  font-size: 20px;
  user-select: none;
}

div.arrow:hover {
  cursor: pointer;
}

<div class="main">
  <div class="item_div" id="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
  <div class="arrow" id="left"><span>&#10094;</span></div>
  <div class="arrow" id="right"><span>&#10095;</span></div>
</div>

標籤：javascript html css

上一篇：如何拒絕用戶輸入的多余字符？

下一篇：顯示帶有<span>的圓形<a>鏈接以充當圓形按鈕