我正在尝试构建一个无限旋转木马，当我按下下一个按钮时，一切都很好，但当我按下prev时，最后一个孩子在过渡结束后被准备好了，看起来不太好。
我也试着在过渡开始时做好准备，但同样的事情正在发生。我怎样才能顺利完成？你有下面的代码。非常感谢。
const wrapper = document.querySelector('.wrapper');
const container = document.querySelector('.container');
const children = wrapper.querySelectorAll('.child');
const leftArr = document.querySelector('.left-arrow');
const rightArr = document.querySelector('.right-arrow');
let counter = 0;
let infiniteCounter = 0;
container.addEventListener('click', function(e) {
wrapper.style.transition = '.5s ease all';
if(e.target.classList.contains('left-arrow')) {
infiniteCounter = -1;
counter += 20;
wrapper.style.transform = `translateX(${counter}%)`;
}
if(e.target.classList.contains('right-arrow')) {
infiniteCounter = 1;
counter -= 20;
wrapper.style.transform = `translateX(${counter}%)`;
}
});
let infiniteCarousel = function() {
wrapper.style.transition = 'none';
counter = 0;
if(infiniteCounter === 1) {
wrapper.appendChild(wrapper.firstElementChild);
wrapper.style.transform = `translateX(0%)`;
}
if(infiniteCounter === -1) {
wrapper.style.transform = `translateX(0%)`;
wrapper.prepend(wrapper.lastElementChild);
}
}
wrapper.addEventListener('transitionend', infiniteCarousel);body {
display: flex;
justify-content:center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background: black;
width: 80vw;
overflow: hidden;
}
.wrapper {
display: flex;
justify-content: flex-start;
width: 100%;
transition: .5s ease all;
}
.left-arrow, .right-arrow {
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
width: 50px;
height: 50px;
background: #ED4956;
border-radius: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.left-arrow {
left: 2%;
top: 50%;
}
.right-arrow {
left: 98%;
top: 50%;
}
.child {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 250px;
width: 20%;
font-weight: bold;
font-size: 4rem;
}
.child1 {
background: green;
}
.child2 {
background: blue;
}
.child3 {
background: yellow;
}
.child4 {
background: navy;
}
.child5 {
background: red;
}
.child6 {
background: pink;
}
.child7 {
background: grey;
}
.child8 {
background: brown;
}
.child9 {
background: #ff80ed;
}<div class="container">
<div class="wrapper">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
<div class="child child4">4</div>
<div class="child child5">5</div>
<div class="child child6">6</div>
<div class="child child7">7</div>
<div class="child child8">8</div>
<div class="child child9">9</div>
</div>
<div class="left-arrow"> ← </div>
<div class="right-arrow"> → </div>
</div>您遇到的问题是上一个元素不存在，浏览器需要花费时间才能将该元素放在那里。一种解决方法是将整个转盘向左移动。通过这种方式，第一个元素将被隐藏。我添加了"；左：-20%；位置：相对；到包装上，似乎更好的
const wrapper = document.querySelector('.wrapper');
const container = document.querySelector('.container');
const children = wrapper.querySelectorAll('.child');
const leftArr = document.querySelector('.left-arrow');
const rightArr = document.querySelector('.right-arrow');
let counter = 0;
let infiniteCounter = 0;
container.addEventListener('click', function(e) {
wrapper.style.transition = '.5s ease all';
if(e.target.classList.contains('left-arrow')) {
infiniteCounter = -1;
counter += 20;
wrapper.style.transform = `translateX(${counter}%)`;
}
if(e.target.classList.contains('right-arrow')) {
infiniteCounter = 1;
counter -= 20;
wrapper.style.transform = `translateX(${counter}%)`;
}
});
let infiniteCarousel = function() {
wrapper.style.transition = 'none';
counter = 0;
if(infiniteCounter === 1) {
wrapper.appendChild(wrapper.firstElementChild);
wrapper.style.transform = `translateX(0%)`;
}
if(infiniteCounter === -1) {
wrapper.style.transform = `translateX(0%)`;
wrapper.prepend(wrapper.lastElementChild);
}
}
wrapper.addEventListener('transitionend', infiniteCarousel);body {
display: flex;
justify-content:center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background: black;
width: 80vw;
overflow: hidden;
}
.wrapper {
display: flex;
justify-content: flex-start;
width: 100%;
transition: .5s ease all;
left: -20%;
position: relative;
}
.left-arrow, .right-arrow {
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
width: 50px;
height: 50px;
background: #ED4956;
border-radius: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.left-arrow {
left: 2%;
top: 50%;
}
.right-arrow {
left: 98%;
top: 50%;
}
.child {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 250px;
width: 20%;
font-weight: bold;
font-size: 4rem;
}
.child1 {
background: green;
}
.child2 {
background: blue;
}
.child3 {
background: yellow;
}
.child4 {
background: navy;
}
.child5 {
background: red;
}
.child6 {
background: pink;
}
.child7 {
background: grey;
}
.child8 {
background: brown;
}
.child9 {
background: #ff80ed;
}<div class="container">
<div class="wrapper">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
<div class="child child4">4</div>
<div class="child child5">5</div>
<div class="child child6">6</div>
<div class="child child7">7</div>
<div class="child child8">8</div>
<div class="child child9">9</div>
</div>
<div class="left-arrow"> ← </div>
<div class="right-arrow"> → </div>
</div>const wrapper = document.querySelector('.wrapper');
const container = document.querySelector('.container');
const children = wrapper.querySelectorAll('.child');
const leftArr = document.querySelector('.left-arrow');
const rightArr = document.querySelector('.right-arrow');
let counter = 0;
let infiniteCounter = 0;
container.addEventListener('click', function(e) {
wrapper.style.transition = '.5s ease all';
if(e.target.classList.contains('left-arrow')) {
infiniteCounter = -1;
counter += 20;
wrapper.style.transform = `translateX(${counter}%)`;
wrapper.style.transform = `translateX(0%)`;
wrapper.prepend(wrapper.lastElementChild);
}
if(e.target.classList.contains('right-arrow')) {
infiniteCounter = 1;
counter -= 20;
wrapper.style.transform = `translateX(${counter}%)`;
wrapper.appendChild(wrapper.firstElementChild);
wrapper.style.transform = `translateX(0%)`;
}
});
let infiniteCarousel = function() {
wrapper.style.transition = 'none';
counter = 0;
}
wrapper.addEventListener('transitionend', infiniteCarousel);body {
display: flex;
justify-content:center;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background: black;
width: 80vw;
overflow: hidden;
}
.wrapper {
display: flex;
justify-content: flex-start;
width: 100%;
transition: .5s ease all;
}
.left-arrow, .right-arrow {
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
font-size: 2rem;
color: white;
width: 50px;
height: 50px;
background: #ED4956;
border-radius: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.left-arrow {
left: 2%;
top: 50%;
}
.right-arrow {
left: 98%;
top: 50%;
}
.child {
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
height: 250px;
width: 20%;
font-weight: bold;
font-size: 4rem;
}
.child1 {
background: green;
}
.child2 {
background: blue;
}
.child3 {
background: yellow;
}
.child4 {
background: navy;
}
.child5 {
background: red;
}
.child6 {
background: pink;
}
.child7 {
background: grey;
}
.child8 {
background: brown;
}
.child9 {
background: #ff80ed;
}<div class="container">
<div class="wrapper">
<div class="child child1">1</div>
<div class="child child2">2</div>
<div class="child child3">3</div>
<div class="child child4">4</div>
<div class="child child5">5</div>
<div class="child child6">6</div>
<div class="child child7">7</div>
<div class="child child8">8</div>
<div class="child child9">9</div>
</div>
<div class="left-arrow"> ← </div>
<div class="right-arrow"> → </div>
</div>