span标签下onclick事件，显示图片数组，图片是链接形式，图片比较多

使用弹窗来显示大量图片可能会比较麻烦，因为弹窗的大小是有限制的。如果你有很多图片需要显示，可能需要使用其他的方式来展示，例如使用轮播图或者分页等方式。下面是一个使用轮播图来展示图片的示例：

HTML代码：

<div>
  <span onclick="showImages()">点击查看图片</span>
</div>

<!-- 轮播图容器 -->
<div id="imageSlider"></div>

JavaScript代码：

function showImages() {
  var images = [
    "image1.jpg",
    "image2.jpg",
    "image3.jpg",
    "image4.jpg",
    "image5.jpg",
    "image6.jpg",
    "image7.jpg",
    "image8.jpg",
    "image9.jpg"
  ]; // 图片链接数组

  // 构造图片标签
  var imageElements = "";
  for (var i = 0; i < images.length; i++) {
    imageElements +=
      "<div><img src='" + images[i] + "'/></div>";
  }

  // 显示轮播图
  var slider = new Slider("imageSlider", {
    images: imageElements
  });
}

// 轮播图构造函数
function Slider(containerId, options) {
  var container = document.getElementById(containerId);
  var images = options.images;

  // 插入轮播图HTML
  var sliderHTML =
    "<div class='slider-container'>" + images + "</div>";
  container.innerHTML = sliderHTML;

  // 初始化轮播图
  var sliderContainer = container.querySelector(".slider-container");
  var sliderItems = sliderContainer.querySelectorAll("div");
  var sliderCount = sliderItems.length;
  var currentIndex = 0;
  var timerId = null;

  // 隐藏所有图片，显示当前图片
  function showImage(index) {
    for (var i = 0; i < sliderCount; i++) {
      sliderItems[i].style.display = "none";
    }
    sliderItems[index].style.display = "block";
  }

  // 自动播放
  function autoPlay() {
    currentIndex++;
    if (currentIndex >= sliderCount) {
      currentIndex = 0;
    }
    showImage(currentIndex);
    timerId = setTimeout(autoPlay, 2000);
  }

  // 开始轮播
  autoPlay();
}

在这个示例中，我们使用了一个轮播图插件来展示图片。在 showImages 函数中，我们将图片链接数组转换为对应的 img 标签，并将它们放到轮播图容器中。然后，我们创建了一个轮播图对象，并将轮播图容器和图片标签传递给它。最后，我们调用轮播图对象的 autoPlay 方法来开始播放图片。你可以根据需要修改图片链接数组和轮播图样式来实现不同的效果。