// 无限循环左右滚动插件 const vhInfiniteLoop = { init: function (dom, k = true, time = 1) { const _this = this; // 设置唯一标识符并初始化 const numStr = `${dom.classList.value}-num`; const widthStr = `${dom.classList.value}-width`; const funStr = `${dom.classList.value}-fun`; _this[numStr] = 0; _this[funStr] = null; // Copy一遍子元素DOM并添加到父元素DOM尾部 Array.from(dom.children) .map(i => i.cloneNode(true)) .forEach(i => dom.appendChild(i)); // 取宽度,设置初始位置,绑定事件 // 每个子元素给悬浮事件 Array.from(dom.children).forEach(i => { // 悬浮事件 i.addEventListener("mouseenter", function () { _this[funStr] = function () { requestAnimationFrame(() => { _this[funStr](dom, numStr, widthStr, k); }); }; }); // 取消悬浮事件 i.addEventListener("mouseleave", function () { _this[funStr] = function (dom, numStr, widthStr, k) { _this[widthStr] = dom.offsetWidth; !k && (dom.style.transform = `translateX(-${_this[widthStr] / 2}px)`); _this[numStr] += time; dom.style.marginLeft = `${k ? "-" : ""}${_this[numStr]}px`; _this[numStr] >= _this[widthStr] / 2 && (_this[numStr] = 0); requestAnimationFrame(() => { _this[funStr](dom, numStr, widthStr, k); }); }; }); }); // 设置循环函数 _this[funStr] = function (dom, numStr, widthStr, k) { _this[widthStr] = dom.offsetWidth; !k && (dom.style.transform = `translateX(-${_this[widthStr] / 2}px)`); _this[numStr] += time; dom.style.marginLeft = `${k ? "-" : ""}${_this[numStr]}px`; _this[numStr] >= _this[widthStr] / 2 && (_this[numStr] = 0); requestAnimationFrame(() => { _this[funStr](dom, numStr, widthStr, k); }); }; // 启动 requestAnimationFrame(() => { _this[funStr](dom, numStr, widthStr, k); }); } };