https://www.art-fireplace.com/assets/js/unit/dev-history.js

1class ScriptDevHistory extends Script {
2	constructor(params) {
3		super(params)
4		this.is_swiper = params.is_swiper
5		this.delay = params.delay
6		this.loop = params.loop
7		this.attrId = params.attrId
8		this.mySwiper = null; // 保存 Swiper 实例的引用
9		this.prevScreenWidth = window.innerWidth; // 记录前一个屏幕宽度
10		this.mr_sm = params.mr_sm
11		this.mr_md = params.mr_md
12		this.mr_xl = params.mr_xl
13		this.screenMr = '0px'
14		this.cols_xl = params.cols_xl
15		this.cols_md = params.cols_md
16		this.cols_col = params.cols_col
17		this.cols = '12'
18		this.screen = 'xl'
19	}
20
21	async init() {
22		let attrId = this.attrId
23		let mr_sm = this.mr_sm
24		let mr_md = this.mr_md
25		let mr_xl = this.mr_xl
26		let cols_xl = this.cols_xl
27		let cols_md = this.cols_md
28		let cols_col = this.cols_col
29		// let screenMr = '10px'
30		let autoplay = false
31		if (this.is_swiper == 1) { autoplay = { delay: this.delay, disableOnInteraction: false } }
32
33		let yearElements = document.querySelectorAll(`#${attrId} .swiper-wrapper-year .flex-year`);
34		if (this.prevScreenWidth < 768) {
35			this.screenMr = mr_sm
36			this.cols = cols_col
37			this.screen = 'sm'
38		} else if (this.prevScreenWidth >= 768 && this.prevScreenWidth < 1200) {
39			this.screenMr = mr_md
40			this.cols = cols_md
41			this.screen = 'md'
42		} else if (this.prevScreenWidth >= 1200) {
43			this.screenMr = mr_xl
44			this.cols = cols_xl
45			this.screen = 'xl'
46		}
47
48		let viewCount = {
49			'12': 1,
50			'6': 2,
51			'4': 3,
52			'3': 4,
53			'2_4': 5,
54			'2': 6,
55			'12_7': 7,
56			'12_8': 8,
57			'12_9': 9,
58			'12_10': 10,
59			'12_11': 11,
60			'1': 12,
61			'auto': 'auto'
62		}
63		let viewCountXl = {
64			'12': 1.3,
65			'6': 2.5,
66			'4': 3.5,
67			'3': 4.5,
68			'2_4': 5.5,
69			'2': 6.5,
70			'12_7': 7.5,
71			'12_8': 8.5,
72			'12_9': 9.5,
73			'12_10': 10.5,
74			'12_11': 11.5,
75			'1': 12.5,
76		}
77		// 初始化 Swiper 实例
78		this.mySwiper = new Swiper(`#${attrId} .devswiper`, {
79			loop: this.loop == 1,
80			speed: 1000,
81			// spaceBetween: this.prevScreenWidth > 1199 ? 30 : 10,
82			spaceBetween: parseFloat(this.screenMr) || 0,
83			slidesPerView: this.screen === 'xl' ? viewCountXl[this.cols] : viewCount[this.cols],
84			// centeredSlides: !(this.prevScreenWidth > 1199),
85			navigation: {
86				nextEl: `#${attrId} .devswiper .next`,
87				prevEl: `#${attrId} .devswiper .prev`,
88			},
89			autoplay,
90		})
91
92		let switchYear = (index) => {
93			yearElements.forEach((el, i) => {
94				el.classList.remove('on');
95				if (index >= i) { el.classList.add('on'); }
96				var wrapper = document.querySelector(`#${attrId} .swiper-wrapper-year`);
97				if (i === index && wrapper) {
98					wrapper.scroll({
99						left: el.offsetLeft,
100						behavior: 'smooth'
101					});
102				}
103			})
104		}
105
106		this.mySwiper.on('transitionStart', () => {
107			var activeIndex = this.mySwiper.realIndex;
108			var isEnd = this.mySwiper.isEnd;
109			if (isEnd) {
110				yearElements.forEach(el => { el.classList.add('on'); })
111			} else { switchYear(activeIndex) }
112		});
113
114		yearElements.forEach((element, index) => {
115			element.addEventListener('click', () => {
116				let abs = Math.abs(index - this.mySwiper.realIndex)
117				if (index > this.mySwiper.realIndex) {
118					for (let i = 0; i < abs; i++) {
119						((i) => {
120							setTimeout(() => {
121								this.mySwiper.slideNext(1000 / (abs), false)
122							}, 3000 / abs * i);
123						})(i);
124					}
125				} else if (index < this.mySwiper.realIndex) {
126					for (let i = 0; i < abs; i++) {
127						((i) => {
128							setTimeout(() => {
129								this.mySwiper.slidePrev(1000 / (abs), false)
130							}, 3000 / abs * i);
131						})(i);
132					}
133				}
134				switchYear(index)
135			});
136		});
137
138		// 添加屏幕宽度变化的监听器
139		let resetSwiper = () => {
140			let currentScreenWidth = window.innerWidth;
141			let screenMr = '10px';
142			let screen = 'xl';
143			if (currentScreenWidth < 768) {
144				screenMr = mr_sm
145				screen = 'sm'
146				this.cols = this.cols_col
147			} else if (currentScreenWidth >= 768 && currentScreenWidth < 1200) {
148				screenMr = mr_md
149				screen = 'md'
150				this.cols = cols_md
151			} else if (currentScreenWidth >= 1200) {
152				screenMr = mr_xl
153				screen = 'xl'
154				this.cols = cols_xl
155			}
156			if (screen !== this.screen) {
157				this.screen = screen;
158				// this.mySwiper.params.spaceBetween = currentScreenWidth > 1199 ? 30 : 10;
159				this.mySwiper.params.spaceBetween = parseFloat(screenMr) || 10;
160				// this.mySwiper.params.centeredSlides = !(currentScreenWidth > 1199);
161				this.mySwiper.params.slidesPerView = screen === 'xl' ? viewCount

161Xl[this.cols] : viewCount[this.cols];
162				this.mySwiper.update(); // 更新 Swiper 实例的配置
163				this.prevScreenWidth = currentScreenWidth; // 更新前一个屏幕宽度
164			}
165		}
166		window.addEventListener('resize', resetSwiper);
167	}
168}