写一个图片切换的小案例，巩固一下setAttribute的用法。setAttribute()方法能够给dom元素添加属性并指定属性值，如果属性已经存在则更改属性值。 方法：将图片放入
写一个图片切换的小案例，巩固一下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>实现效果为当点击下一张图片切换至数组中的下一张，点击上一张切换至数组中的下一张
初始界面为
点击下一张效果为
--结束END--
本文标题: js实现图片数组中图片切换效果
本文链接: https://www.lsjlt.com/news/164801.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0