javascript實現點擊圖片切換
擊實現圖片切換效果在生活中非常的常見,恰巧今天的練習也是做一個圖片的切換效果。
HTML代碼如下:
<div class="img"> <img src="images/1.jpg" id="myImg" class="myImg" alt="這裡是1.jpg"> <p> <input type="button" id="pre" class="btn" value="上一張"> <input type="button" id="next" class="btn" value="下一張"> </p> </div>
CSS代碼如下:
*{ margin: 0; padding: 0; } img{ boder:none; } button{ outline: none; vertical-align: middle; } .img{ width: 100%; margin-left: auto; margin-right: auto; margin-top: 20px; text-align: center; } .myImg{ width: 500px; height: 300px; } p{ text-align: center; } p .btn{ width: 100px; height: 30px; background: #306bbf; color: #fff; margin-top: 20px; margin-bottom: 20px; }
javascript 部分:
//找標簽 let myImg = document.getElementById("myImg"); let pre=document.getElementById("pre"); let next=document.getElementById("next"); //創建一個保存圖片的數組 let arrImg = ["images/1.jpg", "images/1-1.png", "images/3.jpg" ]; //數組的索引下標 let index=0; //定義事件函數 function preImg(event){ index--; //實現循環切換 if (index<0) { index=arrImg.length-1; } myImg.src = arrImg[index]; } function nextImg(event){ index++; //實現循環切換 if (index>arrImg.length-1) { index=0; } myImg.src = arrImg[index]; } pre.addEventListener('click',preImg); next.addEventListener('click',nextImg);
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- None Found