作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我做了这个slider但是没有自动滑动,我应该添加什么代码让这个自动滑动?我应该把代码放在哪里?
我已尝试为 goNext
函数设置 setinterval
但仍然无法正常工作
class Slider {
constructor(props) {
this.rootElement = props.element;
this.slides = Array.from(
this.rootElement.querySelectorAll(".slider-list__item")
);
this.slidesLength = this.slides.length;
this.current = 0;
this.isAnimating = false;
this.direction = 1; // -1
this.navBar = this.rootElement.querySelector(".slider__nav-bar");
this.thumbs = Array.from(this.rootElement.querySelectorAll(".nav-control"));
this.prevButton = this.rootElement.querySelector(".slider__arrow_prev");
this.nextButton = this.rootElement.querySelector(".slider__arrow_next");
this.slides[this.current].classList.add("slider-list__item_active");
this.thumbs[this.current].classList.add("nav-control_active");
this._bindEvents();
}
goTo(index, dir) {
if (this.isAnimating) return;
var self = this;
let prevSlide = this.slides[this.current];
let nextSlide = this.slides[index];
self.isAnimating = true;
self.current = index;
nextSlide.classList.add("slider-list__item_active");
goStep(dir) {
let index = this.current + dir;
let len = this.slidesLength;
let currentIndex = (index + len) % len;
this.goTo(currentIndex, dir);
}
goNext() {
this.goStep(1);
}
goPrev() {
this.goStep(-1);
}
_navClickHandler(e) {
var self = this;
if (self.isAnimating) return;
let target = e.target.closest(".nav-control");
if (!target) return;
let index = self.thumbs.indexOf(target);
if (index === self.current) return;
let direction = index > self.current ? 1 : -1;
self.goTo(index, direction);
}
_bindEvents() {
var self = this;
["goNext", "goPrev", "_navClickHandler"].forEach(method => {
self[method] = self[method].bind(self);
});
self.nextButton.addEventListener("click", self.goNext);
self.prevButton.addEventListener("click", self.goPrev);
self.navBar.addEventListener("click", self._navClickHandler);
}
}
// ===== init ======
let slider = new Slider({
element: document.querySelector(".slider")
});
所以如果有人能告诉我如何让这个轮播 slider 自动滑动,我将非常感激。
最佳答案
直接调用下一个函数
setInterval(function()
{
slider.goNext();
}, 1000);
关于javascript - 如何让这个 Carousel Slider 自动滑动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56352112/
我是一名优秀的程序员,十分优秀!