这段代码使用 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;
您还可以调整滑块的大小、样式和间隔时间,进一步定制滑块,以适应您的网站设计。