通过单击点指示器、gsap 观察者和 javascript 导航到该部分

Question

感谢阅读。

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

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

请给我你的指导。

非常感谢。

这是我的代码笔代码。

下面的代码是用于幻灯片动画的gsapobserver和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);
});
});

Answer 1

问题已解决。谢谢

代码笔

const dots = document.querySelectorAll('.dot-indicator  a');
Array.from(dots).forEach(function(dot) {
dot.addEventListener('click', function() {
index = this.getAttribute("index");
console.log("index:" + index + "current :" + current);
direction = index - current;
change(direction);
});
});