使用jquery或javascript实现图像幻灯片的垂直滚动

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

$(document).ready(function() {
  // 定义图像URL数组
  var imageUrls = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg"
  ];

  // 定义当前显示图像的索引
  var currentIndex = 0;

  // 创建一个函数来切换图像
  function changeImage() {
    // 获取当前图像的URL
    var imageUrl = imageUrls[currentIndex];

    // 创建一个img元素并设置其src属性为当前图像的URL
    var imgElement = $("<img>").attr("src", imageUrl);

    // 将img元素添加到容器中
    $("#slideshow-container").append(imgElement);

    // 使用动画效果将图像向上滚动
    imgElement.animate({ top: "-100%" }, 1000, function() {
      // 动画完成后，移除当前图像并增加索引
      imgElement.remove();
      currentIndex = (currentIndex + 1) % imageUrls.length;
    });
  }

  // 设置一个定时器来定期切换图像
  setInterval(changeImage, 3000);
});