JavaScript实现：输入框创建图片数组并展示为轮播组件

首先调整HTML结构，支持多选文件和轮播控件：

<!-- 文件输入框，开启多选 -->
<input type="file" id="a" multiple accept="image/*">

<!-- 轮播容器 -->
<div class="carousel-container">
  <button class="carousel-btn prev-btn">←</button>
  <img id="carousel-image" src="" alt="轮播图片">
  <button class="carousel-btn next-btn">→</button>
  <!-- 轮播指示器 -->
  <div class="carousel-indicators"></div>
</div>

对应的JavaScript实现，分多图存储和轮播控制两部分：

// 1. 多图存储到localStorage
document.querySelector("#a").addEventListener("change", function() {
  const files = Array.from(this.files);
  const imageDataUrls = [];
  // 读取已存储的图片数组，没有则为空数组
  let storedImages = JSON.parse(localStorage.getItem("carousel-images")) || [];

  files.forEach(file => {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      imageDataUrls.push(reader.result);
      // 所有文件处理完成后更新存储
      if (imageDataUrls.length === files.length) {
        // 合并新图与旧图，用Set去重（不需要去重可直接写[...storedImages, ...imageDataUrls]）
        storedImages = [...new Set([...storedImages, ...imageDataUrls])];
        localStorage.setItem("carousel-images", JSON.stringify(storedImages));
        // 实时更新轮播组件
        initCarousel(storedImages);
      }
    });
    reader.readAsDataURL(file);
  });
});

// 2. 轮播组件初始化与控制
let currentIndex = 0;
let carouselImages = [];

function initCarousel(images) {
  carouselImages = images;
  const imgElement = document.querySelector("#carousel-image");
  const indicatorsContainer = document.querySelector(".carousel-indicators");
  const prevBtn = document.querySelector(".prev-btn");
  const nextBtn = document.querySelector(".next-btn");

  // 清空旧指示器
  indicatorsContainer.innerHTML = "";

  if (carouselImages.length === 0) {
    imgElement.style.display = "none";
    prevBtn.disabled = true;
    nextBtn.disabled = true;
    return;
  }

  // 显示第一张图
  imgElement.style.display = "block";
  imgElement.src = carouselImages[currentIndex];
  prevBtn.disabled = false;
  nextBtn.disabled = false;

  // 生成指示器
  carouselImages.forEach((_, index) => {
    const indicator = document.createElement("span");
    indicator.className = index === currentIndex ? "active" : "";
    indicator.addEventListener("click", () => goToSlide(index));
    indicatorsContainer.appendChild(indicator);
  });
}

// 切换到指定索引的图片
function goToSlide(index) {
  currentIndex = index;
  updateCarousel();
}

// 更新轮播状态
function updateCarousel() {
  const imgElement = document.querySelector("#carousel-image");
  const indicators = document.querySelectorAll(".carousel-indicators span");
  
  imgElement.src = carouselImages[currentIndex];
  
  // 更新指示器激活状态
  indicators.forEach((indicator, index) => {
    indicator.className = index === currentIndex ? "active" : "";
  });
}

// 上一张按钮事件
document.querySelector(".prev-btn").addEventListener("click", () => {
  currentIndex = (currentIndex - 1 + carouselImages.length) % carouselImages.length;
  updateCarousel();
});

// 下一张按钮事件
document.querySelector(".next-btn").addEventListener("click", () => {
  currentIndex = (currentIndex + 1) % carouselImages.length;
  updateCarousel();
});

// 页面加载时初始化轮播
document.addEventListener("DOMContentLoaded", () => {
  const storedImages = JSON.parse(localStorage.getItem("carousel-images")) || [];
  initCarousel(storedImages);
});

添加基础CSS美化轮播：

.carousel-container {
  position: relative;
  max-width: 600px;
  margin: 20px auto;
}

#carousel-image {
  width: 100%;
  height: auto;
  display: none;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 18px;
}

.prev-btn { left: 10px; }
.next-btn { right: 10px; }

.carousel-indicators {
  text-align: center;
  margin-top: 10px;
}

.carousel-indicators span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 5px;
  cursor: pointer;
}

.carousel-indicators span.active {
  background: #333;
}

核心要点说明 #

• 存储逻辑：将选中图片转为DataURL后，与localStorage中已有图片数组合并，通过JSON.stringify转为字符串存储（localStorage仅支持字符串类型）。
• 轮播逻辑：用currentIndex跟踪当前显示的图片，取模运算实现循环切换，同时生成指示器支持直接跳转指定图片。
• 页面加载时自动读取存储的图片数组，初始化轮播组件。

内容的提问来源于stack exchange，提问作者ayyan Mohsin