标签：index 一张 轮播 img src js 简易 按钮 imgArr
要想简单的实现图片的轮播，当点击 上一张按钮 跳转到上一张，点击 下一张按钮 跳转到下一张图片。
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>图片资源：如有侵权的话，请联系我删除哦
标签：index,一张,轮播,img,src,js,简易,按钮,imgArr 来源： https://blog.csdn.net/qq_45030966/article/details/120145990
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。