<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="./image/1.jpg" id="cat" width="400px" height="400">
<br>
<button id="prev">上一张</button>
<button id="next">下一张</button>
<script type="text/javascript">
//1.获取事件源 需要的标签
var cat = document.getElementById('cat');
var next = document.getElementById('next');
var prev = document.getElementById('prev');
var minIndex = 1,maxIndex = 5;currentIndex = minIndex;
//2.设置点击事件
next.onclick = function(){
if(currentIndex === maxIndex){
currentIndex = minIndex;
}else{
currentIndex++;
}
//变量和字符串拼接
cat.setAttribute('src',`./image/${currentIndex}.jpg`)
}
prev.onclick = function(){
if(currentIndex === minIndex){
currentIndex = maxIndex;
}else{
currentIndex--;
}
cat.setAttribute('src',`./image/${currentIndex}.jpg`)
}
</script>
</body>
</html>