我正在尝试创建一个无限轮播，但后退按钮有问题，当我将卡片从位置 1 克隆到卡片 5 时，它会这样做，但它在克隆 5 之前显示位置 1 的卡片。我该如何修复那个问题？
当你到达位置1的卡片时，然后立即克隆位置5的卡片，依此类推，可以看到这是一个无限循环。没有滑动跳跃，但它是连续的。我想要它与原生 JavaScript 一起使用。你能告诉我我的错误在哪里以及如何纠正吗？由于我提到的问题，当前的代码是半功能的，它应该像那样工作。
let indice = 0;
let autoPlay;
const carusel = document.querySelector('.carusel');
const tarjetas = Array.from(carusel.children);
const btnAtras = document.querySelector('.btn-atras');
const contador = document.querySelector('.contador');
tarjetas.forEach(tarjeta => {
carusel.append(tarjeta.cloneNode(true));
carusel.prepend(tarjeta.cloneNode(true));
});
function moverTarjetas() {
actualizarCarusel('transform 0.5s ease-in-out');
}
function moverTarjetasSinAnimacion() {
setTimeout(() => {
actualizarCarusel('none');
}, 500); // Ajusta este valor al tiempo de duración de tu transición CSS
}
function actualizarCarusel(transicion) {
carusel.style.transition = transicion;
carusel.style.transform = `translateX(-${(indice + tarjetas.length) * (350 + 20)}px)`;
contador.textContent = `${(indice % tarjetas.length) + 1} / ${tarjetas.length}`;
}
btnAtras.addEventListener('click', () => {
clearInterval(autoPlay);
indice--;
moverTarjetas();
if (indice === -1) {
indice = tarjetas.length - 1;
moverTarjetasSinAnimacion();
setTimeout(() => {
autoPlay = setInterval(avanzar, 4000);
}, 500);
} else {
moverTarjetas();
autoPlay = setInterval(avanzar, 4000);
}
});
moverTarjetasSinAnimacion();.contenedor {
display: grid;
overflow: hidden;
width: 1110px;
}
.carusel {
display: flex;
gap: 20px;
}
.targeta {
background-color: lightblue;
height: 500px;
width: 350px;
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
}
.targeta.activo {
background-color: lightgray;
}
.btn-atras {
background-color: lightcoral;
}
.contador {
position: absolute;
top: 10px;
right: 10px;
font-size: 2em;
}<div class="btn-atras">Atrás</div>
<div class="contenedor">
<div class="carusel">
<div class="targeta">1</div>
<div class="targeta">2</div>
<div class="targeta">3</div>
<div class="targeta">4</div>
<div class="targeta">5</div>
</div>
</div>
<div class="contador"></div>试试这个：
<body>
<div class="btn-atras">Atrás</div>
<div class="contenedor">
<div class="carusel">
<div class="targeta">1</div>
<div class="targeta">2</div>
<div class="targeta">3</div>
<div class="targeta">4</div>
<div class="targeta">5</div>
</div>
</div>
<script>
let indice = 0;
let autoPlay;
const carusel = document.querySelector('.carusel');
const tarjetas = Array.from(carusel.children);
const btnAtras = document.querySelector('.btn-atras');
const contador = document.querySelector('.contador');
tarjetas.forEach(tarjeta => {
carusel.append(tarjeta.cloneNode(true));
carusel.prepend(tarjeta.cloneNode(true));
});
function moverTarjetas() {
actualizarCarusel('transform 0.5s ease-in-out');
}
function moverTarjetasSinAnimacion() {
setTimeout(() => {
actualizarCarusel('none');
}, 500);
}
function actualizarCarusel(transicion) {
carusel.style.transition = transicion;
carusel.style.transform = `translateX(-${(indice + tarjetas.length) * (350 + 20)}px)`;
contador.textContent = `${(indice % tarjetas.length) + 1} / ${tarjetas.length}`;
}
function avanzar() {
indice++;
moverTarjetas();
if (indice === tarjetas.length * 2 - 1) {
indice = tarjetas.length;
moverTarjetasSinAnimacion();
}
}
btnAtras.addEventListener('click', () => {
clearInterval(autoPlay);
indice--;
moverTarjetas();
if (indice === -1) {
indice = tarjetas.length - 1;
moverTarjetasSinAnimacion();
}
autoPlay = setInterval(avanzar, 4000);
});
moverTarjetasSinAnimacion();
autoPlay = setInterval(avanzar, 4000);
</script>
</body>
单击后退按钮时，您会更新轮播两次，这会导致闪烁效果。调整索引后需要更新一次轮播。 CSS 保持不变。