使用JS實現簡單的圖片切換功能
本文實例為大傢分享瞭使用JS實現簡單的圖片切換的具體代碼，供大傢參考，具體內容如下
效果如圖：
分析：首先為按鈕添加單擊響應事件，然後構造函數。
其實切換圖片就是切換img標簽src的屬性，可以獲取標簽屬性然後進行修改即可。
可以把屬性值存放在一個數組中，通過數組的索引來獲取。
附上相關代碼：
css部分代碼：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#a{
margin: 50px auto;
width: 500px;
padding: 15px;
text-align: center;
background-color: #99FF99;
}
</style>
js代碼：
<script>
window.onload=function(){
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var img = document.getElementsByTagName("img")[0];
//構建一個數組存圖片
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
var index = 0;
//console.log(src);
var p = document.getElementById("b");
btn1.onclick = function(){
//alert("1");
//img.src="img/2.jpg"
index--;
if (index<0){
index = imgArr.length-1
}
img.src=imgArr[index]
p.innerHTML = "共"+ imgArr.length+"張圖片，當前第"+(index+1)+"張"
};
btn2.onclick = function(){
//alert("2");
index++;
if (index>4){
index = 0;
}
img.src=imgArr[index]
p.innerHTML = "共"+imgArr.length+"張圖片，當前第"+(index+1)+"張"
};
};
</script>
body部分：
<body> <div id="a"> <img src="img/1.jpg" alt="雪糕" /> <button id="btn1">上一張</button> <button id="btn2">下一張</button> <p id="b">共5張圖片，當前第1張</p> </div> </body>
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。