时间戳

首页 > 解决方案 > 修复点错误以指示轮播中的幻灯片

javascript - 修复点错误以指示轮播中的幻灯片

问题描述

我几乎完成了我理想的轮播，除了我尝试添加点表示幻灯片不能按预期工作，.active类 in.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)`;
  }
});

而且我无法在点上添加点击事件以将我带到轮播中相应的幻灯片。感谢您的阅读和帮助。

标签： javascripthtmlcss

解决方案

在查看了您的 codepen 详细信息后，我发现您的轮播在触发下一个和上一个按钮时存在问题。使用https://stackoverflow.com/questions/60577870提供的过渡效果帮助编辑此答案...

next_btn.addEventListener("click", () => {
  carousel_slide.style.transition = "all 0.3s ease-in-out";
    dot.forEach(e=>e.classList.remove( "active" ))
  counter++;
  carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
  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{
      dot[counter].classList.add("active");
  }
    
});

prev_btn.addEventListener("click", () => {
  carousel_slide.style.transition = "all 0.3s ease-in-out";
    dot.forEach(e=>e.classList.remove( "active" ))
  counter--;
  carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
  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{
      dot[counter].classList.add("active");
  }
});

只需修改两个单击事件侦听器就可以完美地工作我猜的 carousal。

要单击该点，您可以使用以下代码

dot.forEach(function(e, i){
    e.addEventListener("click", (elem)=>{        
        dot.forEach(e=>e.classList.remove( "active" ))
       counter=i; dot[counter].classList.add("active");
    carousel_slide.style.transform = `translateX(${-size * (counter + 1)}px)`;
    })
})

推荐阅读