圖片的切換功能

時間 2019-11-12

標籤圖片切換功能简体版

原文原文鏈接

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 500px;
            margin: 50px auto;
            padding: 10px;
            background-color: greenyellow;
            /*設置文本居中*/
            text-align: center;
        }
    </style>

    <script type="text/javascript">
        window.onload = function() {
            //獲取兩個按鈕
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");

            //獲取img標籤（獲取到的是一個數組，取第一個索引爲0）
            var img = document.getElementsByTagName("img")[0];

            //建立一個數組，用來保存圖片的路徑
            var imgArr = ["../../img/111.jpg", "../../img/222.jpg", "../../img/333.jpg", "../../img/444.jpg"];

            var index = 0;

            //顯示當前張數
            var info = document.getElementById("info");
            info.innerHTML = "一共" + imgArr.length + "張圖片" + "當前張數爲第" + (index + 1) + "張";

            prev.onclick = function() {
                index--;
                if(index < 0) {
                    index = imgArr.length - 1;
                }
                img.src = imgArr[index];
                //從新加載當前張數
                info.innerHTML = "一共" + imgArr.length + "張圖片" + "當前張數爲第" + (index + 1) + "張";
            }

            next.onclick = function() {
                index++;
                if(index > imgArr.length - 1) {
                    index = 0;
                }
                img.src = imgArr[index];
                //從新加載當前張數
                info.innerHTML = "一共" + imgArr.length + "張圖片" + "當前張數爲第" + (index + 1) + "張";
            }
        }
    </script>
</head>

<body>
<div id="outer">
    <p id="info"></p>
    <--默認顯示圖片-->
    <img src="../../img/222.jpg" />
    <button id="prev">上一張</button>
    <button id="next">下一張</button>
</div>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。