如何为JS动态渲染的图片添加可跳转至独立页面的点击链接

核心思路 #

通过配置图片与跳转地址的映射关系，给动态切换的图片绑定点击事件，实现点击跳转对应页面的需求。

具体修改步骤 #

1. 调整JS配置与逻辑 #

将原来的纯图片名数组改为包含跳转链接的配置数组，同时新增图片点击事件绑定逻辑，修改后的完整JS代码如下：

<script>
var dd = 5;
var cnt = 0;
// 按顺序配置每张图片对应的跳转地址，自行替换link字段内容即可
var imageConfig = [
  {imgName: '1.png', link: '你的页面1地址'},
  {imgName: '2.png', link: '你的页面2地址'},
  {imgName: '3.png', link: '你的页面3地址'},
  {imgName: '4.png', link: '你的页面4地址'}
];
var imageDir = 'images/'; 
var stars = document.getElementById('stars');  

// 页面加载完成后绑定点击跳转事件
window.onload = function() {
  stars.addEventListener('click', function() {
    // 当前为当前页跳转，要新窗口打开可替换为 window.open(imageConfig[cnt].link, '_blank')
    window.location.href = imageConfig[cnt].link;
  })
}

function chng() {
  cnt++;
  var len = imageConfig.length;
  if (cnt < dd) {
    stars.src = imageDir + imageConfig[cnt].imgName;
  }
  else if (cnt == len) {
    stars.src = imageDir + imageConfig[0].imgName;
    cnt = 0;
  }
}
</script>

2. 补全HTML结构（若缺失img标签） #

如果你的页面中还没有id为stars的图片元素，将原有HTML部分调整为如下内容即可：

<!--my images appear here but they are not clickable-->
<div class="image-container">
  <span id="result" align="center">
    <img id="stars" src="images/1.png" alt="展示图片">
  </span> 
</div>

补充说明 #

如果不需要在当前页跳转，希望点击后打开新标签页显示目标页面，把点击事件里的window.location.href替换为window.open(imageConfig[cnt].link, '_blank')即可。

内容的提问来源于stack exchange，提问作者JockStrap