Question

我有一些使用 vanilla js 的无限轮播部分。我的逻辑基于对上一张幻灯片使用 justify-content:flex-end，对下一张幻灯片使用 justify-content:flex-start。我的轮播有默认的 justify-content:flex-start 并且它在滑动到下一个时工作正常，但是如果我使用幻灯片来上一个，则存在一些渲染延迟。这是因为使用 justify-content:flex-end for prev，但是如何摆脱延迟？这是我的代码

const slider = document.querySelector('.slider')
const carousel = document.querySelector('.carousel')
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')

let direction

prev.addEventListener('click', () => {
    if (direction === -1) {
        slider.appendChild(slider.lastElementChild)
        direction = 1
    }
    direction = 1
    carousel.style.justifyContent = 'flex-end'
    slider.style.transform = 'translate(20%)'
})

next.addEventListener('click', () => {
    direction = -1
    carousel.style.justifyContent = 'flex-start'
    slider.style.transform = 'translate(-20%)'
})

slider.addEventListener('transitionend', () => {
    if (direction === -1) {
        slider.appendChild(slider.firstElementChild)
    } else if (direction === 1) {
        slider.prepend(slider.lastElementChild)
    }

    slider.style.transition = 'none'
    slider.style.transform = 'translate(0)'
    setTimeout(() => {
        slider.style.transition = 'transform 0.5s'
    })
})

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
  background-color: green;
  position: relative;
}

.carousel {
  display: flex;
  width: 70%;
  height: 100%;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

.slider {
  display: flex;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
}

.item {
  display: flex;
  width: 20%;
  flex: 1;
  flex-shrink: 0;
  flex-basis: 20%;
  height: 70px;
}

.prev,
.next {
  position: absolute;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  border: 1px solid green;
  cursor: pointer;
  z-index: 3;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

<section class="section">
    <div class="prev">Prev</div>
    <div class="next">Next</div>
    <div class="carousel">
        <div class="slider">
            <div class="item"> Item 1</div>
            <div class="item"> Item 2</div>
            <div class="item"> Item 3</div>
            <div class="item"> Item 4</div>
            <div class="item"> Item 5</div>
            <div class="item"> Item 1</div>
            <div class="item"> Item 2</div>
            <div class="item"> Item 3</div>
            <div class="item"> Item 4</div>
            <div class="item"> Item 5</div>
        </div>
    </div>
</section>

Answer 1

不确定这是否是最好的方法。您的代码在滑块转换后附加（和前置）元素。由于溢出：隐藏，当它附加到滑块的末尾时，您不会注意到它发生，但您会注意到它何时添加到开头，这就是为什么您在翻译后看到它呈现的原因。因此，您可以将滑块向左移动 20%，这样您就不会看到元素何时被添加并且不会更改您的大部分代码。

const slider = document.querySelector('.slider')
const carousel = document.querySelector('.carousel')
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')

let direction

prev.addEventListener('click', () => {
    if (direction === -1) {
        slider.appendChild(slider.lastElementChild)
        direction = 1
    }
    direction = 1
    // removed - carousel.style.justifyContent = 'flex-end'
    slider.style.transform = 'translate(20%)'
})

next.addEventListener('click', () => {
    direction = -1
    // removed - carousel.style.justifyContent = 'flex-start'
    slider.style.transform = 'translate(-20%)'
})

slider.addEventListener('transitionend', () => {
    if (direction === -1) {
        slider.appendChild(slider.firstElementChild)
    } else if (direction === 1) {
        slider.prepend(slider.lastElementChild)
    }

    slider.style.transition = 'none'
    slider.style.transform = 'translate(0)'
    setTimeout(() => {
        slider.style.transition = 'transform 0.5s'
    })
})

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 80px 0;
  background-color: green;
  position: relative;
}

.carousel {
  display: flex;
  width: 70%;
  height: 100%;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

.slider {
  display: flex;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  /* Only change */ margin-left: -20%;
}

.item {
  display: flex;
  width: 20%;
  flex: 1;
  flex-shrink: 0;
  flex-basis: 20%;
  height: 70px;
}

.prev,
.next {
  position: absolute;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  border: 1px solid green;
  cursor: pointer;
  z-index: 3;
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

<section class="section">
    <div class="prev">Prev</div>
    <div class="next">Next</div>
    <div class="carousel">
        <div class="slider">
            <div class="item"> Item 1</div>
            <div class="item"> Item 2</div>
            <div class="item"> Item 3</div>
            <div class="item"> Item 4</div>
            <div class="item"> Item 5</div>
            <div class="item"> Item 6</div>
            <div class="item"> Item 7</div>
            <div class="item"> Item 9</div>
            <div class="item"> Item 0</div>
        </div>
    </div>
</section>

删除幻灯片延迟香草js

1 个答案: