46 lines
2.0 KiB
JavaScript
46 lines
2.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded',()=>{
|
|
// Hero slider
|
|
const slider = document.querySelector('.hero.hero-slider');
|
|
const slides = Array.from(document.querySelectorAll('.hero.hero-slider .slide'));
|
|
const dotsContainer = document.querySelector('.hero.hero-slider .dots');
|
|
const prevBtn = document.querySelector('.hero.hero-slider .arrow.prev');
|
|
const nextBtn = document.querySelector('.hero.hero-slider .arrow.next');
|
|
let index = 0; let timer = null; const DURATION = 3000;
|
|
|
|
if (slider && slides.length) {
|
|
// init dots
|
|
slides.forEach((_, i) => {
|
|
const b = document.createElement('button');
|
|
b.setAttribute('aria-label', `切换到第${i+1}张`);
|
|
if (i === 0) b.classList.add('active');
|
|
b.addEventListener('click', ()=> go(i));
|
|
dotsContainer.appendChild(b);
|
|
});
|
|
|
|
function show(i){
|
|
slides.forEach((s, idx)=> s.classList.toggle('active', idx === i));
|
|
dotsContainer.querySelectorAll('button').forEach((d, idx)=> d.classList.toggle('active', idx === i));
|
|
}
|
|
function next(){ index = (index + 1) % slides.length; show(index); }
|
|
function prev(){ index = (index - 1 + slides.length) % slides.length; show(index); }
|
|
function go(i){ index = i % slides.length; show(index); restart(); }
|
|
|
|
function start(){ timer = setInterval(next, DURATION); }
|
|
function stop(){ if (timer) clearInterval(timer); timer = null; }
|
|
function restart(){ stop(); start(); }
|
|
|
|
nextBtn.addEventListener('click', ()=>{ next(); restart(); });
|
|
prevBtn.addEventListener('click', ()=>{ prev(); restart(); });
|
|
|
|
slider.addEventListener('mouseenter', stop);
|
|
slider.addEventListener('mouseleave', start);
|
|
|
|
// touch swipe (basic)
|
|
let startX = 0; let dx = 0;
|
|
slider.addEventListener('touchstart', e=>{ startX = e.touches[0].clientX; dx = 0; stop(); }, {passive:true});
|
|
slider.addEventListener('touchmove', e=>{ dx = e.touches[0].clientX - startX; }, {passive:true});
|
|
slider.addEventListener('touchend', ()=>{ if (Math.abs(dx) > 40) { dx < 0 ? next() : prev(); } start(); });
|
|
|
|
start();
|
|
}
|
|
}); |