js实现图片数组中的图片切换
程序员文章站
2022-05-14 21:06:40
...
写一个图片切换的小案例，巩固一下setAttribute的用法。setAttribute()方法能够给dom元素添加属性并指定属性值，如果属性已经存在则更改属性值。
方法：将图片放入数组中首先给img一个初始值，使用index存放当前被点击图片的下标，当再一次点击时，下标+1赋值给数组下标，利用setAttribute()方法给img标签设置src属性。上一张效果反之，代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
img {
width: 400px;
height: 400px;
display: block;
}
</style>
<body>
<img src="../imgs/t11.jpg" alt="" id="img">
<button type="button" id="prev">上一张</button>
<button type="button" id="next">下一张</button>
</body>
<script type="text/javascript">
var imgs = document.getElementById("img")
var nextBtn = document.getElementById("next")
var prevBtn = document.getElementById("prev")
var imgArr = [
"../imgs/t11.jpg",
"../imgs/doraemon.jpg",
"../imgs/peiqi.jpg",
"../imgs/qiang.jpg"
]
var index = 0;
nextBtn.onclick = function() {
index++;
if (index > imgArr.length - 1) {
index = 0
}
imgs.setAttribute("src", imgArr[index])
}
prevBtn.onclick = function() {
index--
if (index < 0) {
index = imgArr.length - 1
}
imgs.setAttribute("src", imgArr[index])
}
</script>
</html>
实现效果为当点击下一张图片切换至数组中的下一张，点击上一张切换至数组中的下一张
初始界面为
点击下一张效果为