经典图片切换练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: yellowgreen;
/*
设置文本居中
*/
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
点击按钮切换图片
*/
//获取两个按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");
/*
要切换图片就是要修改img标签里的src属性
*/
//获取img标签
var img = document.getElementsByTagName("img")[0];
//创建一个数组，用来保存图片路径
var imgArr = ["img/3.webp","img/4.webp","img/5.webp","img/6.webp","img/7.webp","img/8.webp"];
//创建一个变量，来保存当前正在显示的图片的索引
var index = 0;
//获取id为info的P元素
var info = document.getElementById("info");
//设置提示文字
info.innerHTML = "一共"+imgArr.length +"张图片，当前第 "+ (index + 1) +" 张";
//分别为两个按钮绑定单击响应函数
prev.onclick = function(){
/*
切换到上一张，索引自减
*/
index --;
//判断Index是否小于0
if(index < 0){
index = 0;
}
img.src = imgArr[index];
//当点击按钮以后，重新设置信息
info.innerHTML = "一共"+imgArr.length +"张图片，当前第 "+ (index + 1) +" 张";
};
next.onclick = function(){
/*
切换到上一张，索引自增
*/
index ++;
//判断Index是否小于0
if(index > imgArr.length - 1){
index = imgArr.length - 1;
}
//要修改一个元素的属性 元素.属性 = 属性值
img.src = imgArr[index];
//当点击按钮以后，重新设置信息
info.innerHTML = "一共"+imgArr.length +"张图片，当前第 "+ (index + 1) +" 张";
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info">一共五张图片，当前是第一张</p>
<img src = "img/3.webp" alt = "冰棍" />
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
实例效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xiCMSMjV-1656559215219)(C:\Users\lenovo\AppData\Roaming\Typora\typora-user-images\image-20220630111837853.png)]