通过单击 dot Indicator、gsap Observer&javascript 导航到部分

感谢阅读。

我想通过单击点指示器导航到部分。

点指示器正在显示现在是哪个部分，但我也想单击点进行导航。

请给我你的指导。

非常感谢你。

这是我的代码笔代码。

下面的代码是用于幻灯片动画的gsap observer和tween。

gsap.registerPlugin(Observer);

let current = 0;
let animating = false;

const sections = gsap.utils.toArray("section");

gsap.set(sections, { yPercent: (i) => 100 * i, xPercent: (i) => 50 * i * -1 });

Observer.create({
target: window,
type: "wheel,touch,pointer",
wheelSpeed: -1,
onUp: () => change(1),
onDown: () => change(-1)
});

function change(direction) {

if (!animating) {

  if (
    !(current === 0 && direction === -1) &&
    !(current === sections.length - 1 && direction === 1)
  ) {
    console.log("start tweening");

    animating = true;

    const tl = gsap.timeline({
  
      onComplete: function () {
        current += direction;
        animating = false;
        console.log("end tweening");
      }
    });

    tl.to(sections, { scale: 0.9 });
    tl.to(
      sections,
      { yPercent: "-=" + direction * 100, xPercent: "+=" + direction * 50 },
      "<+=0.4"
    );
    tl.to(sections, { scale: 1 }, "<+=0.4");
  } else {
    console.log("nowhere to go");
  }
}
}

这是点指示器代码

// Dot Indicator
window.addEventListener("DOMContentLoaded", () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      const id = entry.target.getAttribute("id");
      if (entry.intersectionRatio > 0) {
        document
          .querySelector(`.dot-indicator li a[href="#${id}"]`)
          .parentElement.classList.add("active");
      } else {
        document
          .querySelector(`.dot-indicator li a[href="#${id}"]`)
          .parentElement.classList.remove("active");
      }
    });
  });

  // Track all sections that have an `id` applied
  document.querySelectorAll("section[id]").forEach((section) => {
    observer.observe(section);
  });
});