图片的切换功能

时间 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>