halo 通过Injector 增加侧边栏轮播图效果

halo 通过Injector 增加侧边栏轮播图效果

_

通过 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>
nftables入门 2026-01-08
每日科技新闻速览(2026-01-09) 2026-01-09

评论区