我几乎已经完成了理想的轮播,只是我尝试添加一些点来指示幻灯片无法按预期工作,.active
中的.dot
类的行为很奇怪,看到这里是codepen。
这是我使用的HTML:
<div class="carousel-container">
<i class="fas fa-chevron-left" id="prevBtn"></i>
<i class="fas fa-chevron-right" id="nextBtn"></i>
<div class="carousel-slide">
<img src="https://images.unsplash.com/photo-158&q=80" class="firstSlide" alt="">
...
</div>
</div>
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
这是我使用的JavaScript:
/* carousel */
const carousel_slide = document.querySelector(".carousel-slide");
const carousel_images = document.querySelectorAll(".carousel-slide img");
const dots = document.querySelector(".dots");
const dot = document.querySelectorAll(".dot");
const prev_btn = document.querySelector("#prevBtn");
const next_btn = document.querySelector("#nextBtn");
// counter
let counter = 0;
let size = carousel_images[0].clientWidth;
carousel_slide.insertAdjacentHTML(
"afterbegin",
carousel_images[carousel_images.length - 1].outerHTML
);
carousel_slide.insertAdjacentHTML("beforeend", carousel_images[0].outerHTML);
carousel_slide.style.transform = `translateX(${-size * 1}px)`;
// carousel_slide.style.transform = `translateX(${-size * counter}px)`;
next_btn.addEventListener("click", () => {
if (counter >= carousel_images.length) {
setTimeout(() => {
counter = 0;
dot[counter].classList.add("active");
carousel_slide.style.transition = "none";
carousel_slide.style.transform = `translateX(${-size}px)`;
}, 300);
} else {
carousel_slide.style.transition = "all 0.3s ease-in-out";
counter++;
for (i = 0; i < dot.length; i++) {
dot[i].className = dot[i].className.replace(" active", "");
}
dot[counter].classList.add("active");
carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
}
});
prev_btn.addEventListener("click", () => {
if (counter < 0) {
setTimeout(() => {
counter = carousel_images.length - 1;
carousel_slide.style.transition = "none";
carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
}, 300);
} else {
carousel_slide.style.transition = "all 0.3s ease-in-out";
counter--;
for (i = 0; i < dot.length; i++) {
dot[i].className = dot[i].className.replace(" active", "");
}
dot[counter].classList.add("active");
carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
}
});
而且我无法在圆点上添加click事件,无法将我带到其在轮播中的相应幻灯片。感谢您的阅读和帮助。
查看您的Codepen详细信息后,我在触发下一个和上一个按钮时发现了您的轮播问题。
next_btn.addEventListener("click", () => {
counter++;
for (i = 0; i < dot.length; i++) {
dot[i].className = dot[i].className.replace(" active", "");
}
if (counter >= carousel_images.length) {
setTimeout(() => {
counter = 0;
dot[counter].classList.add("active");
carousel_slide.style.transition = "none";
carousel_slide.style.transform = `translateX(${-size}px)`;
}, 300);
} else {
carousel_slide.style.transition = "all 0.3s ease-in-out";
dot[counter].classList.add("active");
carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
}
});
prev_btn.addEventListener("click", () => {
counter--;
for (i = 0; i < dot.length; i++) {
dot[i].className = dot[i].className.replace(" active", "");
}
if (counter < 0) {
setTimeout(() => {
counter = carousel_images.length - 1; dot[counter].classList.add("active");
carousel_slide.style.transition = "none";
carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
}, 300);
} else {
carousel_slide.style.transition = "all 0.3s ease-in-out";
dot[counter].classList.add("active");
carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
}
});
只需修改两次单击事件侦听器即可完美运行我猜想的回旋