求帮忙用nodejs做一个照片展览
在运行之后可以得到这样的效果。
左边一行标签，点击图像1234，右边就会显示图像1234.
能否提供一个思路和文件？
这样？
<style>
.left{float:left;width:120px}
.left a{display:block;text-decoration:none}
</style>
<div class="left">
<a href="https://avatar.csdnimg.cn/4/1/8/4_weixin_43814295.jpg">图像 1</a>
<a href="https://img-ask.csdnimg.cn/upload/1621473715504.jpg">图像 2</a>
<a href="https://avatar.csdnimg.cn/7/B/2/0_showbo_1602469774.jpg">图像 4</a>
<a href="https://avatar.csdnimg.cn/E/D/C/4_qq_15769939_1620608836.jpg">图像 5</a>
</div>
<div class="right">
</div>
<script>//原生js
let as = document.querySelectorAll('.left a'), right = document.querySelector('.right');
for (let a of as) a.onclick = function () {
right.innerHTML = '<img src="' + this.href + '"/>'
return false;
};
as[0].click();
</script>
<!---jQuery
<script src="https://g.csdnimg.cn/??lib/jquery/1.12.4/jquery.min.js"></script>
<script>
$('.left a').click(function () {
$('.right').html('<img src="'+this.href+'"/>')
return false;
}).eq(0).trigger('click')
</script>-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app {
display: flex;
justify-content: space-around;
}
.left {
width: 30%;
text-align: center;
padding: 30px;
border-right: 1px solid red;
cursor: pointer;
}
.right {
width: 60%;
padding: 30px;
}
</style>
</head>
<body>
<div id="app">
<div class="left">
<div onclick="changeImg(0)">图片1</div>
<div onclick="changeImg(1)">图片2</div>
<div onclick="changeImg(2)">图片3</div>
<div onclick="changeImg(3)">图片4</div>
</div>
<div class="right">
<img src="" id="rightImg">
</div>
</div>
<script>
var imgList = [
'https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF',
'https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF',
'https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF',
'https://t7.baidu.com/it/u=727460147,2222092211&fm=193&f=GIF'
]
var el = document.querySelector('#rightImg')
el.src = imgList[0]
function changeImg (i) {
el.src = imgList[i]
}
</script>
</body>
</html>效果实现了，如果图片多的话左边的按钮可以用一个循环实现