js實現圖片數組中圖片切換效果
寫一個圖片切換的小案例，鞏固一下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>
實現效果為當點擊下一張圖片切換至數組中的下一張，點擊上一張切換至數組中的下一張
初始界面為
點擊下一張效果為
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。