https://xtbank.com/uiFramework/commonResource/js/topicsAnimation.js

1/**
2 * 第四屏专题专栏动画控制（标题滑入 + 轮播图淡入）
3 */
4class TopicsAnimation {
5  constructor() {
6    this.topicsTitle = null;
7    this.topicsCarousel = null;
8    this.currentSlideIndex = 0;
9    this.init();
10  }
11
12  init() {
13    // 等待DOM加载完成
14    if (document.readyState === 'loading') {
15      document.addEventListener('DOMContentLoaded', () => this.setup());
16    } else {
17      this.setup();
18    }
19  }
20
21  setup() {
22    // 获取标题元素
23    this.topicsTitle = document.querySelector('.topics-content-title');
24    // 获取轮播图容器元素
25    this.topicsCarousel = document.querySelector('.loan-product-list');
26    
27    if (!this.topicsTitle) {
28      console.warn('Topics title element not found');
29      return;
30    }
31
32    if (!this.topicsCarousel) {
33      console.warn('Topics carousel element not found');
34      return;
35    }
36
37    // 初始状态设为隐藏
38    this.hideTitle();
39    this.hideCarousel();
40
41    // 等待Swiper实例可用
42    this.waitForSwiper();
43  }
44
45  waitForSwiper() {
46    const checkSwiper = () => {
47      if (window.mainSwiper) {
48        this.bindSwiperEvents();
49      } else {
50        setTimeout(checkSwiper, 100);
51      }
52    };
53    checkSwiper();
54  }
55
56  bindSwiperEvents() {
57    // 监听滑动事件
58    window.mainSwiper.on('slideChange', () => {
59      this.currentSlideIndex = window.mainSwiper.activeIndex;
60      this.handleSlideChange();
61    });
62
63    // 检查初始状态
64    this.currentSlideIndex = window.mainSwiper.activeIndex;
65    this.handleSlideChange();
66  }
67
68  handleSlideChange() {
69    // 第四屏的索引是3（从0开始计数）
70    if (this.currentSlideIndex === 3) {
71      this.showTitle();
72      // 轮播图延迟0.5秒后淡入，让标题先滑入
73      setTimeout(() => {
74        this.showCarousel();
75      }, 500);
76    } else {
77      this.hideTitle();
78      this.hideCarousel();
79    }
80  }
81
82  showTitle() {
83    if (this.topicsTitle) {
84      this.topicsTitle.classList.remove('slide-out');
85      this.topicsTitle.classList.add('slide-in');
86    }
87  }
88
89  hideTitle() {
90    if (this.topicsTitle) {
91      this.topicsTitle.classList.remove('slide-in');
92      this.topicsTitle.classList.add('slide-out');
93    }
94  }
95
96  showCarousel() {
97    if (this.topicsCarousel) {
98      this.topicsCarousel.classList.remove('fade-out');
99      this.topicsCarousel.classList.add('fade-in');
100    }
101  }
102
103  hideCarousel() {
104    if (this.topicsCarousel) {
105      this.topicsCarousel.classList.remove('fade-in');
106      this.topicsCarousel.classList.add('fade-out');
107    }
108  }
109}
110
111// 创建实例
112const topicsAnimation = new TopicsAnimation();