Question

我目前正在使用香草JS构建轮播，与之前用jQuery构建的轮播不同，我将它滑出了循环（我使用.length属性定义了））。这个问题正在双向发生。

为什么会发生这种情况，我该怎么解决？这是一个简单的示例：

let currentSlide = 0
const holder = document.querySelector('.holder')
const totalSlides = holder.querySelectorAll('.holder-child')
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')

const moveSlide = slide => {
  const leftPosition = -slide * 100 + 'vw'
  holder.style.left = leftPosition
}

const nextSlide = () => {
  currentSlide = currentSlide + 1
  moveSlide(currentSlide)
  if (currentSlide > totalSlides.length - 1) {
    currentSlide = 0
  }
}

const prevSlide = () => {
  currentSlide = currentSlide - 1
  moveSlide(currentSlide)
  if (currentSlide < 0) {
    currentSlide = totalSlides.length - 1
  }
}

next.addEventListener('click', () => {
  nextSlide()
})

prev.addEventListener('click', () => {
  prevSlide()
})

.flex {
  display: flex;
}

.slideshow {
  position: relative;
  overflow: hidden;
  width: 100vw;
}

.holder {
  position: relative;
  top: 0;
  left: 0;
  width: 500vw;
  transition: left 1s;
}

.holder-child {
  display: flex;
  width: 100vw;
}

.speaker {
  padding: 0 8vw 0 8vw;
}

.controls {
  justify-content: space-between;
}

<h2>Test</h2>
<div class="slideshow">
  <div class="controls flex">
    <p class="prev pointer">prev</p>
    <p class="next pointer">next</p>
  </div>
  <div class=" holder flex">
    <div class="holder-child">
      <p>slide 1</p>
    </div>
    <div class="holder-child">
      <p>slide 2</p>
    </div>
  </div>

JSFiddle：https://jsfiddle.net/5f8cbxdr/

Answer 1

在moveSlide()和currentSlide方法期间，在最终计算prevSlide()之前调用nextSlide()似乎引起了一个较小的逻辑问题。

请考虑将moveSlide()的调用移到prevSlide()和nextSlide()函数的末尾。这意味着当出现边缘情况时（即您的currentSlide位于幻灯片范围的两端），随后对moveSlide()的调用将导致幻灯片在重新调整的基础上定位currentSlide的值：

let currentSlide = 0
const holder = document.querySelector('.holder')
const totalSlides = holder.querySelectorAll('.holder-child')
const next = document.querySelector('.next')
const prev = document.querySelector('.prev')

const moveSlide = slide => {
  const leftPosition = -slide * 100 + 'vw'
  holder.style.left = leftPosition
}

const nextSlide = () => {
  currentSlide = currentSlide + 1
  if (currentSlide > totalSlides.length - 1) {
    currentSlide = 0
  }
  /* Final value for currentSlide now determined, so call moveSlide() 
     to position slides consistently with most up to date currentSlide
     value */
  moveSlide(currentSlide)
}

const prevSlide = () => {
  currentSlide = currentSlide - 1
  if (currentSlide < 0) {
    currentSlide = totalSlides.length - 1
  }
  /* Final value for currentSlide now determined, so call moveSlide() 
     to position slides consistently with most up to date currentSlide
     value */
  moveSlide(currentSlide)
}

next.addEventListener('click', () => {
  nextSlide()
})

prev.addEventListener('click', () => {
  prevSlide()
})

.flex {
  display: flex;
}

.slideshow {
  position: relative;
  overflow: hidden;
  width: 100vw;
}

.holder {
  position: relative;
  top: 0;
  left: 0;
  width: 500vw;
  transition: left 1s;
}

.holder-child {
  display: flex;
  width: 100vw;
}

.speaker {
  padding: 0 8vw 0 8vw;
}

.controls {
  justify-content: space-between;
}

<h2>Test</h2>
<div class="slideshow">
  <div class="controls flex">
    <p class="prev pointer">prev</p>
    <p class="next pointer">next</p>
  </div>
  <div class=" holder flex">
    <div class="holder-child">
      <p>slide 1</p>
    </div>
    <div class="holder-child">
      <p>slide 2</p>
    </div>
  </div>

Javascript：轮播滑出循环

1 个答案: