通过 Injector 插件,实现Halo的侧边栏轮播图自由。

轮播图代码
<div class="z-slide">
<div class="z-slide-body" style="--fadeout-width:0">
<div class="slide-list" id="slscontainer">
<a href="https://curl.qcloud.com/RiC6LXoK" target="_blank" class="slide-item gradient-card" style="min-width: 100%;">
<img src="/upload/rhino-design-480x320.jpg" class="cover" loading="lazy" alt="腾讯云" style="height: auto;"/>
</a>
<a href="https://www.rainyun.com/OTQ3MTM4_" target="_blank" class="slide-item gradient-card" style="min-width: 100%;">
<img src="/upload/image-Ijtc.webp" class="cover" loading="lazy" alt="雨云" style="height: auto;"/>
</a>
<!-- <a href="/post/3" class="slide-item gradient-card" style="min-width: 100%;">
<div class="cover flex items-center justify-center bg-gray-200 dark:bg-gray-700">
1111111
</div>
</a> -->
</div>
</div>
<!-- 自动轮播核心逻辑 + 保留滚轮交互 -->
<script>
(function () {
const slsc = document.getElementById("slscontainer");
if (!slsc) return;
const interval = 3000; // 3秒切换一次
const step = 300; // 每次滚动距离
let aTimer;
function autoPlay() {
// 检测是否滚动到最右侧,若是则回到开头
const isAtEnd = slsc.scrollLeft + slsc.clientWidth >= slsc.scrollWidth - 10;
if (isAtEnd) {
slsc.scrollTo({ left: 0, behavior: "smooth" });
} else {
slsc.scrollBy({ left: step, behavior: "smooth" });
}
}
// 定时器控制(启动/暂停)
const cTimer = (str) => {
if (str === "s") aTimer = setInterval(autoPlay, interval);
else if (str === "p") clearInterval(aTimer);
};
// 鼠标交互:悬停暂停,离开恢复
slsc.addEventListener("mouseenter", () => cTimer("p"));
slsc.addEventListener("mouseleave", () => cTimer("s"));
// 初始化启动自动轮播
cTimer("s");
})();
</script>
</div>