使用JS實現(xiàn)簡單的圖片切換功能

更新時間：2022年07月13日 14:25:38 作者：@派大星@

這篇文章主要為大家詳細介紹了使用JS實現(xiàn)簡單的圖片切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了使用JS實現(xiàn)簡單的圖片切換的具體代碼，供大家參考，具體內(nèi)容如下

效果如圖：

分析：首先為按鈕添加單擊響應事件，然后構(gòu)造函數(shù)。
其實切換圖片就是切換img標簽src的屬性，可以獲取標簽屬性然后進行修改即可。
可以把屬性值存放在一個數(shù)組中，通過數(shù)組的索引來獲取。

附上相關(guān)代碼：

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];
?? ??? ?//構(gòu)建一個數(shù)組存圖片
?? ??? ?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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: