3ds max demo maxscript switch WordPress 下载 任天堂 作品 动态头像 动物之森 动画 动画工具 哔哩哔哩 建站 心得 测试 游戏 脚本 黑科技
BULLET.S
疯狂造句中......
\r\n \r\n "," \r\n \r\n \r\n "," \r\n \r\n \r\n "," \r\n \r\n \r\n "," \r\n \r\n \r\n "].map(html => {
let temp = document.createElement("div");
temp.innerHTML = html.trim();
return temp.firstChild;
}); // 取得所有社交图标
let sliderWidth, a, currentIndex = 0;
const itemWidth = 35; // 单个图标宽度
const gap = 10; // 图标间距
const itemTotalWidth = itemWidth + gap; // 图标与间距的总宽度
let direction = "right";
// 更新视图，显示 items[currentIndex] 到 items[currentIndex + a]
function updateSlider() {
slider.innerHTML = ""; // 清空现有 li
sliderWidth = sliderWrapper.clientWidth;
a = Math.floor((sliderWidth - 35) / itemTotalWidth); // 计算 a
a = Math.max(1, Math.min(a, items.length)); // a 至少为 1 且不超过总图标数
// 只添加 currentIndex 开始的 a 个元素
for (let i = currentIndex; i < currentIndex + a && i < items.length; i++) {
let li = items[i]; // 获取现有的图标
li.classList.remove("fade-in-left", "fade-in-right"); // 先移除可能存在的动画类
// 根据方向应用动画
if (direction === "left") {
li.classList.add("fade-in-left");
} else {
li.classList.add("fade-in-right");
}
slider.appendChild(li);
}
}
function checkSliderButtonsVisibility() {
if (a >= items.length) {
// 如果一次能显示的图标数量大于等于总数量，隐藏按钮
sliderContainer.classList.add('enough-space');
sliderContainer.classList.remove('not-enough-space');
} else {
// 需要滚动时显示按钮
sliderContainer.classList.remove('enough-space');
sliderContainer.classList.add('not-enough-space');
}
}
// 绑定 next 按钮
nextBtn.addEventListener("click", () => {
if (currentIndex + a < items.length) {
currentIndex += a;
} else {
currentIndex = 0; // 如果已经在最后，则跳转到首个元素
}
direction = "right";
updateSlider();
});
// 绑定 prev 按钮
prevBtn.addEventListener("click", () => {
if (currentIndex - a >= 0) {
currentIndex -= a;
} else {
/**
* 求最后一组首个元素的索引，计算方式为 起始索引=⌊(元素总量−1)/组容量⌋×组容量
* 使用位运算取整更快，有下面三种方法：
* 1、按位或，即 (((items.length - 1) / a) | 0) * a
* 2、双按位非，即 (~~((items.length - 1) / a)) * a
* 3、无符号右移，即 (((items.length - 1) / a) >> 0) * a
* 但以上方法仅适用于非负数，虽然在此处需取整的数值符合条件，但 Math.floor 方法最安全，特此说明，请勿修改
*/
currentIndex = Math.floor((items.length - 1) / a) * a; // 如果已经在首个，则跳转到最后一组的首个元素
}
direction = "left";
updateSlider();
});
// 窗口大小变化时，重新计算 a 并更新
window.addEventListener("resize", () => {
// 重新检查按钮的可见性
checkSliderButtonsVisibility();
// 直接滑动到最前面
currentIndex = 0;
updateSlider();
});
// 延迟执行，确保 CSS 计算完成
requestAnimationFrame(() => {
updateSlider();
checkSliderButtonsVisibility();
});
});
TECH OTAKUS SAVE THE WORLD