span标签onclick事件 弹窗展示图片数组

可以使用以下代码实现：

HTML代码：

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

<div id="imageModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="image">
</div>

CSS样式：

/* 弹窗样式 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed; /* 固定定位 */
  z-index: 1; /* 设置层级 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 添加滚动条 */
  background-color: rgb(0,0,0); /* 设置背景颜色 */
  background-color: rgba(0,0,0,0.9); /* 设置背景颜色透明度 */
}

/* 弹窗内容样式 */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  max-height: 80%;
}

/* 关闭按钮样式 */
.close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  color: #fff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
}

JavaScript代码：

// 图片数组
var images = ["image1.jpg", "image2.jpg", "image3.jpg"];

// 获取弹窗和图片元素
var modal = document.getElementById("imageModal");
var img = document.getElementById("image");

// 点击事件处理函数
function showImages() {
  // 显示弹窗
  modal.style.display = "block";
  // 显示第一张图片
  img.src = images[0];
  // 当前显示的图片索引
  var index = 0;
  // 点击弹窗以外区域关闭弹窗
  modal.onclick = function() {
    modal.style.display = "none";
  };
  // 点击图片切换下一张
  img.onclick = function() {
    index++;
    if (index >= images.length) {
      index = 0;
    }
    img.src = images[index];
  };
}

解释：

1. HTML代码中，`span`标签设置了一个`onclick`事件，当用户点击这个元素时，会触发`showImages()`函数。
2. `showImages()`函数中，首先获取弹窗和图片元素，并设置弹窗的显示样式和显示第一张图片。
3. 然后添加了两个事件处理函数：点击弹窗以外区域关闭弹窗和点击图片切换下一张。
4. 最后，将弹窗和图片元素显示出来。

注意：本代码仅做示例，实际应用中可能需要对弹窗样式、图片数组等进行修改。