用Javascript实现简单的幻灯片放映

<div id="slideshow"></div>

var slides = [
  "image1.jpg",
  "image2.jpg",
  "image3.jpg"
];

// 获取幻灯片容器元素
var slideshowContainer = document.getElementById("slideshow");

// 定义当前幻灯片的索引
var currentSlideIndex = 0;

// 创建并显示当前幻灯片
function showSlide() {
  // 创建一个img元素
  var slide = document.createElement("img");
  
  // 设置img元素的src属性为当前幻灯片的图片URL
  slide.src = slides[currentSlideIndex];
  
  // 将img元素添加到幻灯片容器中
  slideshowContainer.appendChild(slide);
}

// 切换到下一张幻灯片
function nextSlide() {
  // 移除当前幻灯片
  slideshowContainer.removeChild(slideshowContainer.firstChild);
  
  // 增加当前幻灯片索引
  currentSlideIndex++;
  
  // 如果当前幻灯片索引超过了数组长度，则重置为0
  if (currentSlideIndex >= slides.length) {
    currentSlideIndex = 0;
  }
  
  // 显示下一张幻灯片
  showSlide();
}

// 初始化幻灯片放映
function initSlideshow() {
  // 显示第一张幻灯片
  showSlide();
  
  // 每隔3秒切换到下一张幻灯片
  setInterval(nextSlide, 3000);
}

// 调用初始化函数
initSlideshow();