39 lines
1.6 KiB
JavaScript
39 lines
1.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
/** business图片滚动动画 */
|
|
const galleryList = document.querySelector('.gallery-list');
|
|
const galleryImgs = galleryList ? galleryList.querySelectorAll('img') : [];
|
|
if (galleryList && galleryImgs.length > 0) {
|
|
let currentIndex = 0;
|
|
const imgCount = galleryImgs.length;
|
|
const imgHeight = galleryImgs[0].offsetHeight + parseInt(getComputedStyle(galleryImgs[0]).marginBottom);
|
|
let isAnimating = false;
|
|
|
|
// 克隆首图到末尾实现无缝滚动
|
|
const clone = galleryImgs[0].cloneNode(true);
|
|
galleryList.appendChild(clone);
|
|
|
|
function scrollNext() {
|
|
if (isAnimating) return;
|
|
isAnimating = true;
|
|
currentIndex++;
|
|
galleryList.style.transition = 'transform 0.8s cubic-bezier(.4,0,.2,1)';
|
|
galleryList.style.transform = `translateY(-${imgHeight * currentIndex}px)`;
|
|
// 滚动到克隆图后，瞬间回到首图
|
|
if (currentIndex === imgCount) {
|
|
setTimeout(() => {
|
|
galleryList.style.transition = 'none';
|
|
galleryList.style.transform = 'translateY(0)';
|
|
currentIndex = 0;
|
|
// 强制reflow
|
|
void galleryList.offsetWidth;
|
|
isAnimating = false;
|
|
}, 820);
|
|
} else {
|
|
setTimeout(() => {
|
|
isAnimating = false;
|
|
}, 820);
|
|
}
|
|
}
|
|
setInterval(scrollNext, 2500);
|
|
}
|
|
});
|