修正圆点错误以指示转盘中的幻灯片

问题描述 投票:0回答:1

我几乎已经完成了理想的轮播,只是我尝试添加一些点来指示幻灯片无法按预期工作,.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事件,无法将我带到其在轮播中的相应幻灯片。感谢您的阅读和帮助。

javascript html css
1个回答
0
投票

查看您的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)`;
  }
});

只需修改两次单击事件侦听器即可完美运行我猜想的回旋

© www.soinside.com 2019 - 2024. All rights reserved.