方法：將圖片放入數(shù)組中首先給img一個(gè)初始值，使用index存放當(dāng)前被點(diǎn)擊圖片的下標(biāo)，當(dāng)再一次點(diǎn)擊時(shí)，下標(biāo)+1賦值給數(shù)組下標(biāo)，利用setAttribute()方法給img標(biāo)簽設(shè)置src屬性。上一張效果反之，代碼如下。

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<style type="text/css">
?? ??? ?img {
?? ??? ??? ?width: 400px;
?? ??? ??? ?height: 400px;
?? ??? ??? ?display: block;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<img src="../imgs/t11.jpg" alt="" id="img">
?? ??? ?<button type="button" id="prev">上一張</button>
?? ??? ?<button type="button" id="next">下一張</button>
?? ?</body>
?? ?<script type="text/javascript">
?? ??? ?var imgs = document.getElementById("img")
?? ??? ?var nextBtn = document.getElementById("next")
?? ??? ?var prevBtn = document.getElementById("prev")


?? ??? ?var imgArr = [
?? ??? ??? ?"../imgs/t11.jpg",
?? ??? ??? ?"../imgs/doraemon.jpg",
?? ??? ??? ?"../imgs/peiqi.jpg",
?? ??? ??? ?"../imgs/qiang.jpg"
?? ??? ?]
?? ??? ?var index = 0;

?? ??? ?nextBtn.onclick = function() {
?? ??? ??? ?index++;

?? ??? ??? ?if (index > imgArr.length - 1) {

?? ??? ??? ??? ?index = 0
?? ??? ??? ?}
?? ??? ??? ?imgs.setAttribute("src", imgArr[index])

?? ??? ?}

?? ??? ?prevBtn.onclick = function() {
?? ??? ??? ?index--
?? ??? ??? ?if (index < 0) {
?? ??? ??? ??? ?index = imgArr.length - 1
?? ??? ??? ?}
?? ??? ??? ?imgs.setAttribute("src", imgArr[index])
?? ??? ?}
?? ?</script>
</html>

實(shí)現(xiàn)效果為當(dāng)點(diǎn)擊下一張圖片切換至數(shù)組中的下一張，點(diǎn)擊上一張切換至數(shù)組中的下一張

初始界面為