HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<img id="myPic" src="images/img1.jpg" width="400" height="300" alt=""/>
<script>
// 1. 找标签
let myPic = document.getElementById("myPic");
// 2. 事件处理函数
let changePic = function( event ){
// this.src = "images/img2.jpg";
event.currentTarget.src = "images/img2.jpg" ;
};
// 3. 添加事件监听
myPic.addEventListener("click", changePic );
</script>
</body>
</html>
JS：
{
let pics = [
"images/pic1.jpg",
"images/pic2.jpg",
"images/pic3.jpg",
"images/pic4.jpg",
"images/pic5.jpg"
]; // 图片数据，数组管理。最大索引为 4 ，pics.length-1
let i=0;
// 1. 找标签
let myPic = document.getElementById("myPic");
let up = document.getElementById("up");
let down = document.getElementById("down");
// 2. 事件处理函数
let nextFun = function( event ){
i++;
if(i===pics.length){
i=0;
}
myPic.src=pics[i];
};
let preFun= function(event){
i--;
if(i<0){
i=pics.length-1;
}
myPic.src=pics[i];
};
// 3. 添加事件监听
up.addEventListener("click", nextFun );
down.addEventListener("click", preFun );
}
实现效果：
