溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“怎么使用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>
以上就是關于“怎么使用JS實現簡單的圖片切換功能”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
