原生js实现点击“上一张”、“下一张”按钮切换图片
生活随笔
收集整理的這篇文章主要介紹了
原生js实现点击“上一张”、“下一张”按钮切换图片
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
目錄結構：
代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>圖片切換</title></head><body><div><img id="first" src="./images/img01.jpg" width="500px" height="300px" /></div><button style="margin-left: 180px;" id="prev">上一張</button><button id="next">下一張</button><script>// 1.獲取DOM對象var img = document.getElementById("first");var prevBtn = document.getElementById("prev");var nextBtn = document.getElementById("next");// 2.添加點擊事件var minPage = 1;var maxPage = 5;var currentPage = minPage;// 上一張按鈕prevBtn.onclick = function() {// 第一張的上一張是最后一張if(currentPage === minPage) {currentPage = maxPage;} else {currentPage--;}img.setAttribute('src',`./images/img0${currentPage}.jpg`);}// 下一張按鈕nextBtn.onclick = function() {// 最后一張的下一張是第一張if(currentPage === maxPage) {currentPage = minPage;} else {currentPage++;}img.setAttribute('src',`./images/img0${currentPage}.jpg`);}</script></body> </html>?樣式：
?
總結
以上是生活随笔為你收集整理的原生js实现点击“上一张”、“下一张”按钮切换图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [0630]Tyvj 1063 数字串
- 下一篇： AJAX自学笔记01