参考代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn{
display: block
margin:135px auto
width: 30px
height: 30px
font-size: 30px
cursor: pointer
}
.btn:hover
{
color: gray
font-size: 35px
font-weight: bold
}
.img
{
width: 600px
height: 400px
float: left
transition: all 1s
}
.info-img
{
width: 100px
height: 67px
float: left
margin-left: 20px
}
</style>
</head>
<body>
<div style="width: 1000pxheight: 800pxmargin: auto">
<div style="width: 700pxheight: 500pxmargin: auto">
<div style="width: 50pxheight: 400pxfloat: lefttext-align: center">
<span class="btn" onclick="change_img('last')"><</span>
</div>
<img id="1" src="image/fj1.jpg" class="img">
<div style="width: 50pxheight: 400pxfloat: lefttext-align: center">
<span class="btn" onclick="change_img('next')">></span>
</div>
<div style="width: 700pxheight: 100pxtext-align: center">
<span>图片介绍：</span>
<span id="text">风景图片1</span>
</div>
</div>
<div id="info" style="width: 700pxheight: 200pxmargin: autotext-align: center">
</div>
</div>
<script>
var data = [
{id:1,src:"image/fj1.jpg",text:"风景图片1"},
{id:2,src:"image/fj2.jpg",text:"风景图片2"},
{id:3,src:"image/fj3.jpg",text:"风景图片3"},
{id:4,src:"image/fj4.jpg",text:"风景图片4"},
]
var info = document.getElementById("info")
onload = function () {
let doc=``
for(d of data)
{
doc = doc + `<div><img src="${d.src}" value="${d.id}" title="${d.text} "> </div>`
}
info.innerHTML = doc
}
var img = document.getElementsByTagName("img")[0]
var text = document.getElementById("text")
function change_img(e) {
var id = parseInt(img.id)
if(e == "next")
{
id += 1
}else {
id -= 1
}
if(id>4)
{
id=1
}else if(id<1){
id=4
}
try {
img.setAttribute("src",data[id-1].src)
text.innerText = data[id-1].text
img.id = id
}catch(e) {
id = id - 1
}
}
</script>
</body>
</html>
效果：
注意：
图片是本地的
样式这些都可以自己定义。
这个在淘宝后台添加商品的时候添加的相册图片，每一个商品添加了几张图片，跳到详情页的时候根据这个商品的id取出相册中的图片并绑定显示。页面效果需要用js，鼠标经过或者点击小图放大显示
