功能簡單，僅作新手練習，先上個圖
HTML代碼如下：
1.引入css和js
2.寫幾個必要的标簽
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>JS練習之切換圖檔</title>
<link rel="stylesheet" href="style.css" target="_blank" rel="external nofollow" >
<script src="js.js" ></script>
</head>
<body>
<p></p>
<img id="img" src="../img/1.jpg">
<div>
<span id="pre">上一張</span>
<span id="next">下一張</span>
</div>
</body>
</html>
JS代碼如下：
1.浏覽器加載代碼是從上到下的，是以使用window.onload等标簽加載完了在綁定事件
2.初始化參數
3.綁定點選上一張和下一張按鈕事件，第一張的時候點選上一張就到最後一張，最後一張同理
window.onload = function() {
var p = document.getElementsByTagName('p')[0];
var imgs = ['../img/1.jpg','../img/2.jpg','../img/3.jpg','../img/4.jpg','../img/5.jpg'];
var cur = 0;
p.innerHTML = "目前是第"+(cur+1)+"張, 共有"+imgs.length+"張照騙";
document.getElementById('pre').onclick = function() {
document.getElementById('img').src = imgs[cur = (cur-1)<0 ? imgs.length-1 : cur-1];
p.innerHTML = "目前是第"+(cur+1)+"張, 共有"+imgs.length+"張照騙";
};
document.getElementById('next').onclick = function () {
document.getElementById('img').src = imgs[cur = (cur+1)===imgs.length ? 0 : cur+1];
p.innerHTML = "目前是第"+(cur+1)+"張, 共有"+imgs.length+"張照騙";
};
};
CSS代碼如下：
1.沒有使用button，個人比較喜歡使用span來制作按鈕
*{
margin: 0;
padding: 0;
}
img{
width: 500px;
}
p, img, div{
display: flex;
justify-content: center;
text-align: center;
margin: 0 auto;
font-size: 20px;
}
body{
background-color: lightblue;
}
span{
border: 1px solid darkolivegreen;
margin: 10px;
padding: 3px 8px;
}
span:hover{
cursor: pointer;
}
p{
margin: 10px auto;
}
![實作電腦功能[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)