圖片切換 （迴圈切換和順序切換）
阿新 • • 發佈：2018-11-12
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> #controls { width: 400px; margin: auto; text-align: center; } #container { width: 400px; height: 400px; border: 10px solid #eee; position: relative; background: gray; margin: 10px auto 0; } #prev, #next { position: absolute; background: black; filter: alpha(opacity: 40); opacity: 0.4; font-size: 20px; color: white; width: 40px; height: 40px; border: 2px solid white; line-height: 40px; text-align: center; top: 180px; pointer: cursor; text-decoration: none; } #prev:hover, #next:hover { filter: alpha(opacity: 80); opacity: 0.8; } #order, #info { position: absolute; width: 100%; height: 30px; line-height: 30px; text-align: center; background: black; filter: alpha(opacity: 60); opacity: 0.6; font-size: 20px; color: white; } #prev { left: 0; } #next { right: 0; } #picture { height: 400px; width: 400px; } #order { top: 0; } #info { bottom: 0; } </style> </head> <body> <div id="controls"> <input id="round" type="button" value="迴圈播放"> <input id="single" type="button" value="順序播放"> </div> <div id="container"> <a href='javascript:' id="prev"><</a> <a href='javascript:' id="next">></a> <div id="order">1/4</div> <div id="info">圖片一</div> <img src="images/6.jpg" width="400" height="400" id="picture" /> </div> </body> </html> <script type="text/javascript"> var round = document.getElementById("round"); var single = document.getElementById("single"); var prev = document.getElementById("prev"); var next = document.getElementById("next"); var order = document.getElementById("order"); var info = document.getElementById("info"); var pic = document.getElementById("picture"); var arrSrc = ["images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg"]; var arrTitle = ['圖片一', '圖片二', '圖片三', '圖片四']; var num = 0; //點選圖片切換 function qiehuan() { pic.src = arrSrc[num]; order.innerHTML = 1 + num + "/" + arrSrc.length; info.innerHTML = arrTitle[num]; } //點選迴圈播放按鈕 round.onclick = function() { alert("迴圈播放開始了！"); //點選左邊 prev.onclick = function() { num--; if (num == -1) { num = arrSrc.length - 1; } qiehuan(); } //點選右邊 next.onclick = function() { num++; if (num == arrSrc.length) { num = 0; } qiehuan(); } } //點選順序播放按鈕 single.onclick = function() { alert("順序播放開始了!"); //點選右邊 next.onclick = function() { num++; if (num < arrSrc.length) { qiehuan(); } if(num==arrSrc.length){ alert("這是最後一張圖了"); num=arrSrc.length-1; } } //點選左邊 prev.onclick = function() { num--; if (num >-1) { qiehuan(); } if(num==-1){ alert("這是最後一張圖了"); num=0; } } } </script>