js實現圖片預覽翻頁
阿新 • • 發佈:2022-05-12
可以直接複製貼上開啟,圖片是線上的,原理簡單好懂!
效果
原始碼
<!DOCTYPE html> <html> <!--JQuery線上引用--> <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #lv { margin: 0 auto; width: 1000px; height: 800px; background: rgb(150, 235, 180); text-align: center; } #img{ width: 900px; height: 600px; margin-top: 60px; } #pre{ position: absolute; right: 51%; } #next{ position: absolute; right: 44%; } #info{ font-size: x-large; padding-top: 30px; } </style> </head> <body> <div id="lv"> <p id="info"></p> <img id ='img' src="" alt="" /> <button id="pre">上一張</button> <button id="next">下一張</button> </div> </body> <script type="text/javascript"> $(function(){ //獲取兩個按鈕 var pre = document.getElementById("pre"); var next = document.getElementById("next"); //要切換圖片就是要修改img 標籤的src屬性 //獲取img 標籤,但是返回的是陣列,所以你得操作的是陣列中的物件 var img = document.getElementsByTagName("img")[0]; //建立一個數組用來儲存圖片的路徑 var imgArr = ["https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/560-300.jpg", "https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/0537AFF0-55BA-4826-9192-BAA8813F0CA7_1_105_c.jpeg", "https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/615A8F91-1822-445F-903E-5A87FA369977.jpeg"]; var index = 0; var info = document.getElementById("info"); img.src = imgArr[0]; info.innerHTML = "總共" + imgArr.length + "照片,現在是第" + (index + 1) + "照片"; pre.onclick = function () { if (--index < 0) { index = imgArr.length - 1; } img.src = imgArr[index]; info.innerHTML = "總共" + imgArr.length + "照片,現在是第" + (index + 1) + "照片"; }; next.onclick = function () { if (++index > imgArr.length - 1) { index = 0; } img.src = imgArr[index]; info.innerHTML = "總共" + imgArr.length + "照片,現在是" + (index + 1) + "照片"; }; }) </script> </html>