<html><head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <img class="icon" src="img/icon_01.png"> <p></p> <button class="btn1">上一张</button> <button class="btn2">下一张</button> <script> // 拿到所有的标签 var img = document.getElementsByClassName('icon')[0]; var btn1 = document.getElementsByClassName('btn1')[0]; var btn2 = document.getElementsByClassName('btn2')[0]; // 业务处理 var maxNumber = 9; var minNumber = 1; /// // 当前的值 var currentValue = minNumber; // 点上一张 btn1.onclick = function(){ if(currentValue == minNumber){ currentValue = maxNumber; }else{ currentValue = currentValue - 1; } img.src = 'img/icon_0'+currentValue +'.png'; } // 点下一张 btn2.onclick = function(){ if(currentValue == maxNumber ){ currentValue = minNumber; }else{ currentValue = currentValue + 1; } console.log(currentValue); img.src = 'img/icon_0'+currentValue +'.png'; } </script> </body></html>