这段代码使用 Vanilla JS 创建了一个轻量级图像轮播插件，支持手动切换图片以自动幻灯片切换图片效果。它仅需原生JS而无需各类第三方插件即可轻松实现，从而保持网站的轻量级。此外该轮播代码还会支持滑块大小、样式以及轮播间隔时间的自定义。
下面展示如何用 Vanilla JS 创建轻量级图像滑块
1.首先，在网页的 head 标签中添加以下 CDN 链接，加载 Font Awesome CSS（用于箭头图标）。
<link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" referrerpolicy="no-referrer" rel="stylesheet"/>
2.现在，在网页中添加必要的 HTML 元素。包含一个容器，用于容纳图片和导航按钮。
<div class="slider-container"> <div class="image-container"> <img alt="image" src="./img/300.jpg"> <img alt="image" src="./img/300(1).jpg"> <img alt="image" src="./img/300(2).jpg"> <img alt="image" src="./img/300(3).jpg"> <img alt="image" src="./img/300(4).jpg"> </div> <i class="fas fa-angle-double-left btn prev"></i> <i class="fas fa-angle-double-right btn next"></i> </div>
3.应用以下 CSS 样式创建滑块布局、调整尺寸并处理过渡效果。
/*这里仅展示部分示例代码，下载后查看完整版代码*/
.slider-container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}4.最后，添加 JavaScript 代码，以启用图像导航和幻灯片功能。
/*这里仅展示部分示例代码，下载后查看完整版代码*/
const prevEl = document.querySelector(".prev");
const nextEl = document.querySelector(".next");
const imgEls = document.querySelectorAll("img");
const imageContainerEl = document.querySelector(".image-container");
let currentImg = 1;
let timeout;您还可以调整滑块的大小、样式和间隔时间，进一步定制滑块，以适应您的网站设计。
