參考代碼：
<!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:?1000px;height:?800px;margin:?auto;">
<div?style="width:?700px;height:?500px;margin:?auto;">
<div?style="width:?50px;height:?400px;float:?left;text-align:?center;">
<span?class="btn"?onclick="change_img('last')"><</span>
</div>
<img?id="1"?src="image/fj1.jpg"?class="img">
<div?style="width:?50px;height:?400px;float:?left;text-align:?center;">
<span?class="btn"?onclick="change_img('next')">></span>
</div>
<div?style="width:?700px;height:?100px;text-align:?center;">
<span>圖片介紹：</span>
<span?id="text">風景圖片1</span>
</div>
</div>
<div?id="info"?style="width:?700px;height:?200px;margin:?auto;text-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>
效果：
註意：
圖片是本地的
樣式這些都可以自己定義。