请问 goToslide 函数中 这段代码中的 i 和 slide 他们都会成长 差应该都是一样呀 ，为什么会切换下一张图片
(s, i) => (s.style.transform = translateX(${100 * (i - slide)}%))
<section>
<div class="slider">
<div class="slide"><img src="img/img-1.jpg" alt="Photo 1" />div>
<div class="slide"><img src="img/img-2.jpg" alt="Photo 2" />div>
<div class="slide"><img src="img/img-3.jpg" alt="Photo 3" />div>
<div class="slide"><img src="img/img-4.jpg" alt="Photo 4" />div>
<button class="slider__btn slider__btn--left">←button>
<button class="slider__btn slider__btn--right">→button>
<div class="dots">div>
div>
section>
<script>
const slides = document.querySelectorAll('.slide');
const btnLeft = document.querySelector('.slider__btn--left');
const btnRight = document.querySelector('.slider__btn--right');
const dotContainer = document.querySelector('.dots');
let curSlide = 0;
const maxSlide = slides.length - 1;
const createDots = function () {
slides.forEach(function (_, i) {
dotContainer.insertAdjacentHTML(
'beforeend',
``
);
});
};
createDots();
const goToSlide = function (slide) {
slides.forEach(
(s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
);
};
goToSlide(0);
const nextSlide = function () {
if (curSlide === maxSlide) {
curSlide = 0;
} else {
curSlide++;
}
console.log(curSlide);
goToSlide(curSlide);
};
const prevSlide = function () {
if (curSlide === 0) {
curSlide = maxSlide;
} else {
curSlide--;
}
goToSlide(curSlide);
};
btnRight.addEventListener('click', nextSlide);
btnLeft.addEventListener('click', prevSlide);
script>
切换正常的，题主问题是什么？通过translateX将图片水平平移实现显示隐藏。
i是遍历到的slides的下标，slide是当前要显示的curSlide的值固定的，只有一次相同的机会
怎么会一样 i 是增加的 slide 是自减的
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！