新增丰潇网站

fengxiao/js/index.js

@@ -0,0 +1,39 @@
+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);
+    }
+});