要想简单的实现图片的轮播，当点击 上一张按钮 跳转到上一张，点击 下一张按钮 跳转到下一张图片。
html和css代码：
<body>
<div class="outer">
<!-- 实现图片的轮播
并告诉用户现在是第几张图片
-->
<p></p>
<img src="img/1.jpg">
<button class="last">上一张</button>
<button class="next">下一张</button>
</div>
</body>
<style>
.outer {
width: 900px;
height: 400px;
margin: 20px auto;
text-align: center;
}
</style>
下面展示js的编写步骤
实现步骤：
1.首先需要获取上一张按钮与下一张按钮这个元素节点，并使用点击事件onclick去实现图片的轮播效果
//获取上一张按钮
var last = document.getElementsByClassName("last")[0];
last.onclick = function() {
}
// 获取下一张按钮
var next = document.getElementsByClassName("next")[0];
next.onclick = function() {
}
2.分析如何将图片进行上下换转，我们需要获取图片img的文档节点，然后根据img将src进行变化，img的src变化则图片也变化，所以我们可以新建数组来存放图片的src.然后设置一个index作为操作数组的一个变量，这里我们设置index = 0;
//获取当前img
var img = document.getElementsByTagName("img")[0];
//因为获取的img标签为数组，我们需要更改img中src的话，需要将每个图片中的src存为数组
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
// 设置起始位置的index为0
var index = 0;
3.现在我们来操作上一张按钮 和 下一张按钮
业务分析：
通过点击上一张按钮，图片跳转到上一张，说明图片的src改变，就说明我们使用了存放src的数组，并且当处于第一张图片的时候，当点击 上一张按钮 时，图片应该处于最后一张图片，所以我们可以使用一个if条件来判断当前的存放img中src的数组的位置。
点击 下一张按钮 类似。
last.onclick = function() {
//点击上一张按钮，跳转到上一张
// alert("1");
index--;
if (index < 0) {
index = imgArr.length - 1;
}
img.src = imgArr[index];
}
}
// 获取下一张按钮
var next = document.getElementsByClassName("next")[0];
next.onclick = function() {
// 点击下一张按钮，跳转到下一张
// alert(2);
index++;
if (index > imgArr.length - 1) {
index = 0;
}
img.src = imgArr[index];
}
全部代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
.outer {
width: 900px;
height: 400px;
margin: 20px auto;
text-align: center;
}
</style>
<script>
window.onload = function() {
//获取当前img
var img = document.getElementsByTagName("img")[0];
//因为获取的img标签为数组，我们需要更改img中src的话，需要将每个图片中的src存为数组
var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
// 设置起始位置的index为0
var index = 0;
// 获取p标签
var text = document.getElementsByTagName("p")[0];
text.innerHTML = "总共" + imgArr.length + "张图片，现在为" + (index + 1) + "张";
//获取上一张按钮
var last = document.getElementsByClassName("last")[0];
last.onclick = function() {
//点击上一张按钮，跳转到上一张
// alert("1");
index--;
if (index < 0) {
index = imgArr.length - 1;
}
img.src = imgArr[index];
text.innerHTML = "总共" + imgArr.length + "张图片,现在为" + (index + 1) + "张";
}
// 获取下一张按钮
var next = document.getElementsByClassName("next")[0];
next.onclick = function() {
// 点击下一张按钮，跳转到下一张
// alert(2);
index++;
if (index > imgArr.length - 1) {
index = 0;
}
img.src = imgArr[index];
text.innerHTML = "总共" + imgArr.length + "张图片,现在为" + (index + 1) + "张";
}
};
</script>
</head>
<body>
<div class="outer">
<!-- 实现图片的轮播
并告诉用户现在是第几张图片
-->
<p></p>
<img src="img/1.jpg">
<button class="last">上一张</button>
<button class="next">下一张</button>
</div>
</body>
</html>图片资源：如有侵权的话，请联系我删除哦