页面刷新随机显示图片时如何为每张图片设置独立跳转链接

现有代码无法绑定独立跳转链接的核心原因是：存储图片的数组仅保存了图片文件名，没有建立单张图片和对应跳转链接的映射关系。按以下逻辑调整即可实现需求：

• 将原纯字符串格式的图片数组，替换为图片路径+对应跳转链接配对的对象数组，每个数组项一一对应一张图片和它的专属跳转地址
• 随机抽取数组项时，同时拿到匹配的图片地址和跳转链接，生成被<a>标签包裹的图片结构插入页面
• 同步修复了原数组中第一个1.jpg 后携带多余空格的细节问题

修改后可直接运行的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #banner-images img{
            width: 172px;
            height: 215px ;
            border: 10px solid #fff ;
        }
        /* 可选样式：移除a标签默认下划线、点击边框 */
        #banner-images a {
            text-decoration: none;
            outline: none;
        }
    </style>
</head>
<body>
     <div id="banner-images"> </div>
<script> 
// 按实际需求替换每张图对应的跳转地址即可
var bannerList = [
    { imgSrc: '1.jpg', jumpLink: './page1.html' },
    { imgSrc: '2.jpg', jumpLink: './page2.html' },
    { imgSrc: '3.jpg', jumpLink: './page3.html' },
    { imgSrc: '4.jpg', jumpLink: './page4.html' },
    { imgSrc: '5.jpg', jumpLink: './page5.html' },
    { imgSrc: '6.jpg', jumpLink: './page6.html' }
];
// 生成随机索引抽取当前展示的banner
const randomIndex = Math.floor(Math.random() * bannerList.length);
const currentBanner = bannerList[randomIndex];
// 拼接带跳转的结构插入页面，如需新标签页打开，给a标签添加 target="_blank" rel="noopener noreferrer" 属性即可
$(`<a href="${currentBanner.jumpLink}">
    <img class="fade-in" src="images/${currentBanner.imgSrc}">
</a>`).appendTo('#banner-images');
</script>
</body>
</html>

补充说明：如果需要点击图片后在新标签页打开跳转地址，只需要把代码中a标签部分修改为<a href="${currentBanner.jumpLink}" target="_blank" rel="noopener noreferrer">即可。

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