https://www.gwbjkqakr.cc/static/landing-v3/scripts/h5-horizontal-swipe.js

1(function () {
2  // 仅移动端(<=800px)把 fullpage 的整屏"上下翻页"接管为"左右滑动"
3  // PC 端完全不介入,保持原有垂直 fullpage 行为
4  var MOBILE_QUERY = "(max-width: 800px)";
5  var AUTOPLAY_INTERVAL = 3e3;
6  var SWIPE_THRESHOLD = 40; // 触发翻页的最小水平位移(px)
7
8  var state = {
9    active: false,
10    index: 0,
11    count: 0,
12    track: null,
13    dotsWrap: null,
14    sections: [],
15    autoplayTimer: null,
16    startX: 0,
17    startY: 0,
18    deltaX: 0,
19    dragging: false,
20    horizontalLock: false,
21    styleInjected: false,
22  };
23
24  function isMobile() {
25    return window.matchMedia(MOBILE_QUERY).matches;
26  }
27
28  function injectStyle() {
29    if (state.styleInjected) return;
30    state.styleInjected = true;
31    var css =
32      "#fullpage.h5-swipe{position:relative;width:100%;height:100%;overflow:hidden;visibility:visible!important;}" +
33      "#fullpage.h5-swipe .h5-swipe-track{display:flex;flex-wrap:nowrap;height:100%;will-change:transform;}" +
34      "#fullpage.h5-swipe .h5-swipe-track.animate{transition:transform .35s ease;}" +
35      "#fullpage.h5-swipe .h5-swipe-track > .section{flex:0 0 100%;width:100%;max-width:100%;height:100%;box-sizing:border-box;overflow:hidden;}" +
36      "#fullpage.h5-swipe .h5-swipe-dots{position:fixed;left:50%;bottom:5.8rem;transform:translateX(-50%);display:flex;align-items:center;gap:.4rem;z-index:100;pointer-events:auto;}" +
37      "#fullpage.h5-swipe .h5-swipe-dots .dot{width:.45rem;height:.45rem;border-radius:50%;background:#fff;opacity:.6;border:none;padding:0;cursor:pointer;transition:all .2s ease;}" +
38      "#fullpage.h5-swipe .h5-swipe-dots .dot.active{width:1.75rem;border-radius:.55rem;background:#fc6500;opacity:1;}";
39    var el = document.createElement("style");
40    el.setAttribute("data-h5-swipe", "1");
41    el.textContent = css;
42    document.head.appendChild(el);
43  }
44
45  function destroyFullpage() {
46    try {
47      if (
48        window.jQuery &&
49        window.jQuery.fn &&
50        window.jQuery.fn.fullpage &&
51        window.jQuery.fn.fullpage.destroy
52      ) {
53        window.jQuery.fn.fullpage.destroy("all");
54      }
55    } catch (e) {}
56    // 兜底:清掉 fullpage 可能残留的类,避免锁滚动/transform 冲突
57    try {
58      document.documentElement.classList.remove("fp-enabled");
59      if (document.body) document.body.classList.remove("fp-enabled");
60    } catch (e) {}
61  }
62
63  function clearAutoplay() {
64    if (state.autoplayTimer) {
65      clearInterval(state.autoplayTimer);
66      state.autoplayTimer = null;
67    }
68  }
69
70  function startAutoplay() {
71    clearAutoplay();
72    if (state.count <= 1) return;
73    state.autoplayTimer = setInterval(function () {
74      goTo((state.index + 1) % state.count, true);
75    }, AUTOPLAY_INTERVAL);
76  }
77
78  function setTranslate(x, animate) {
79    if (!state.track) return;
80    if (animate) state.track.classList.add("animate");
81    else state.track.classList.remove("animate");
82    state.track.style.transform = "translateX(" + x + "px)";
83  }
84
85  function goTo(index, animate) {
86    if (index < 0) index = 0;
87    if (index > state.count - 1) index = state.count - 1;
88    state.index = index;
89    setTranslate(-index * window.innerWidth, animate !== false);
90    updateDots();
91  }
92
93  function updateDots() {
94    if (!state.dotsWrap) return;
95    var dots = state.dotsWrap.children;
96    for (var i = 0; i < dots.length; i++) {
97      if (i === state.index) dots[i].classList.add("active");
98      else dots[i].classList.remove("active");
99    }
100  }
101
102  function buildDots(fullpage) {
103    if (state.count <= 1) return;
104    var wrap = document.createElement("div");
105    wrap.className = "h5-swipe-dots";
106    for (var i = 0; i < state.count; i++) {
107      var dot = document.createElement("button");
108      dot.type = "button";
109      dot.className = "dot" + (i === 0 ? " active" : "");
110      (function (idx) {
111        dot.addEventListener("click", function () {
112          goTo(idx, true);
113          startAutoplay();
114        });
115      })(i);
116      wrap.appendChild(dot);
117    }
118    state.dotsWrap = wrap;
119    fullpage.appendChild(wrap);
120  }
121
122  function bindTouch(fullpage) {
123    fullpage.addEventListener(
124      "touchstart",
125      function (e) {
126        if (!state.active) return;
127        var t = e.touches[0];
128        state.startX = t.clientX;
129        state.startY = t.clientY;
130        state.deltaX = 0;
131        state.dragging = true;
132        state.horizontalLock = false;

133        clearAutoplay();
134        setTranslate(-state.index * window.innerWidth, false);
135      },
136      { passive: true }
137    );
138
139    fullpage.addEventListener(
140      "touchmove",
141      function (e) {
142        if (!state.active || !state.dragging) return;
143        var t = e.touches[0];
144        var dx = t.clientX - state.startX;
145        var dy = t.clientY - state.startY;
146        if (!state.horizontalLock) {
147          if (Math.abs(dx) < 6 && Math.abs(dy) < 6) return;
148          // 判定主方向:横向才接管,纵向交还给页面(如弹层滚动)
149          state.horizontalLock = Math.abs(dx) > Math.abs(dy);
150          if (!state.horizontalLock) {
151            state.dragging = false;
152            return;
153          }
154        }
155        state.deltaX = dx;
156        // 边缘阻尼
157        var base = -state.index * window.innerWidth;
158        var atStart = state.index === 0 && dx > 0;
159        var atEnd = state.index === state.count - 1 && dx < 0;
160        if (atStart || atEnd) dx *= 0.35;
161        setTranslate(base + dx, false);
162        if (e.cancelable) e.preventDefault();
163      },
164      { passive: false }
165    );
166
167    function onTouchEnd() {
168      if (!state.active || !state.dragging) return;
169      state.dragging = false;
170      if (state.horizontalLock && Math.abs(state.deltaX) > SWIPE_THRESHOLD) {
171        goTo(state.index + (state.deltaX < 0 ? 1 : -1), true);
172      } else {
173        goTo(state.index, true);
174      }
175      startAutoplay();
176    }
177
178    fullpage.addEventListener("touchend", onTouchEnd, { passive: true });
179    fullpage.addEventListener("touchcancel", onTouchEnd, { passive: true });
180  }
181
182  function enable() {
183    if (state.active) return true;
184    var fullpage = document.getElementById("fullpage");
185    if (!fullpage) return false;
186    var sections = fullpage.querySelectorAll(".section");
187    if (!sections.length) return false;
188
189    injectStyle();
190    destroyFullpage();
191
192    // destroy 后重新取一次(fullpage 可能重排了 DOM)
193    fullpage = document.getElementById("fullpage");
194    sections = fullpage.querySelectorAll(".section");
195    if (!sections.length) return false;
196
197    var track = document.createElement("div");
198    track.className = "h5-swipe-track";
199    state.sections = [];
200    Array.prototype.forEach.call(sections, function (sec) {
201      state.sections.push(sec);
202      track.appendChild(sec);
203    });
204    fullpage.appendChild(track);
205
206    state.track = track;
207    state.count = state.sections.length;
208    state.index = 0;
209    fullpage.classList.add("h5-swipe");
210    fullpage.style.visibility = "visible";
211
212    buildDots(fullpage);
213    bindTouch(fullpage);
214    goTo(0, false);
215    startAutoplay();
216
217    state.active = true;
218    return true;
219  }
220
221  function disable() {
222    if (!state.active) return;
223    clearAutoplay();
224    var fullpage = document.getElementById("fullpage");
225    // 还原:把 section 移回 #fullpage,移除轨道/指示点
226    if (fullpage && state.track) {
227      state.sections.forEach(function (sec) {
228        sec.style.removeProperty("transform");
229        fullpage.appendChild(sec);
230      });
231      if (state.track.parentNode) state.track.parentNode.removeChild(state.track);
232      if (state.dotsWrap && state.dotsWrap.parentNode)
233        state.dotsWrap.parentNode.removeChild(state.dotsWrap);
234      fullpage.classList.remove("h5-swipe");
235      // 复位 visibility，否则 fallback 的 "已 visible 则跳过" 守卫会阻止 PC 端重建
236      fullpage.style.visibility = "hidden";
237    }
238    state.track = null;
239    state.dotsWrap = null;
240    state.sections = [];
241    state.active = false;
242    // PC 端交还给原生 fullpage:触发一次 fallback 重建
243    if (typeof window.__initFullpageFallback === "function") {
244      window.__initFullpageFallback();
245    }
246  }
247
248  function sync() {
249    if (isMobile()) {
250      return enable();
251    }
252    disable();
253    return true;
254  }
255
256  function waitAndInit() {
257    if (!isMobile()) return; // PC 端不接管
258    if (enable()) return;
259    var observer = new MutationObserver(function () {
260      if (enable()) observer.disconnect();
261    });
262    observer.observe(document.body, { childList: true, subtree: true });
263    setTimeout(function () {
264      enable();
265      observer.disconnect();
266    }, 8000);
267  }
268
269  var resizeTimer = null;
270  window.addEventListener("resize", function () {
271    if (resizeTimer) clearTimeout(resizeTimer);
272    resizeTimer = setTimeout(function () {
273      sync();
274      if (state.active) goTo(state.index, false); // 宽度变化后重新对齐
275    }, 200);
276  });
277
278  // 等 fullpage 初始化完成后再接管(fallback 在 load 后 ~1800ms 初始化)
279  window.addEventListener("load", function () {
280    setTimeout(waitAndInit, 2000);
281  });
282})();