<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 300px;
height: 250px;
}
</style>
</head>
<body>
<!-- <input type="text" id="inp"> -->
<button id="btn">切换</button><br>
<img src="./img/33.jpg" alt="" id="img"><br>
<p id="txt">当前显示的是./img/33.jpg</p>
<script>
// 第一张 0 --- > 1 --- > 2 ---> 3
// 将复杂的数据存储在数组中, 储存图片地址
var arr = ['./img/33.jpg','./img/22.jpg','./img/44.jpg','./img/11.jpg' ];
console.log(arr);
// 不知道当前是第几张时, 设定一个变量, 存储当前是第几张
var n = 0;
// 效果描述: 点击切换按钮, 图片根据n切换
// 1. 获取元素
var btn = document.getElementById('btn');
console.log(btn);
var img = document.getElementById('img');
console.log(img);
var txt = document.getElementById('txt');
// btn添加事件
btn.onclick = function(){
// n需要+1
n = n + 1;
console.log(n);
// 根据n取出数组中的项
console.log(arr[n]);
// 赋值地址给图片
img.src = arr[n];
// 文本内容更改
txt.innerHTML = '当前显示的是' + arr[n];
}
</script>
</body>
</html>