请问 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',
`<button class="dots__dot" data-slide="<span class="hljs-subst">${i}" ></button>`
);
});
};
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>