用于从Json文件和按钮获取图像的Javascript下一步和上一步功能

// 假设Json文件的结构为：{ "images": ["image1.jpg", "image2.jpg", "image3.jpg"] }

// 获取Json文件中的图像数据
function getImagesFromJson(jsonUrl) {
  return fetch(jsonUrl)
    .then(response => response.json())
    .then(data => data.images);
}

// 图像展示
const imageElement = document.createElement("img");
document.body.appendChild(imageElement);

// 下一步和上一步按钮
const nextButton = document.createElement("button");
nextButton.textContent = "下一步";
nextButton.addEventListener("click", showNextImage);
document.body.appendChild(nextButton);

const prevButton = document.createElement("button");
prevButton.textContent = "上一步";
prevButton.addEventListener("click", showPrevImage);
document.body.appendChild(prevButton);

// 切换图像
let currentIndex = 0;
let images = [];

function showNextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  imageElement.src = images[currentIndex];
}

function showPrevImage() {
  currentIndex = (currentIndex - 1 + images.length) % images.length;
  imageElement.src = images[currentIndex];
}

// 从Json文件获取图像数据，并初始化展示第一张图像
getImagesFromJson("path/to/json/file.json")
  .then(data => {
    images = data;
    imageElement.src = images[currentIndex];
  })
  .catch(error => {
    console.error("Failed to load images from JSON:", error);
  });