图片切换的练习

<!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 () {
            // 点击按钮切换图片，就是要修改img标签道德src属性

            // 获取两个按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");

            // 获取img标签
            var img = document.getElementsByTagName("img")[0];

            // 创建一个数组，用来保存图片的路径
            var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"]

            //创建一个变量，来保存当前正在显示图片的索引
            var index = 0;

            // 获取id为info的p元素
            var info = document.getElementById("info");

            //分别为两个按钮绑定单击响应函数
            prev.onclick = function () {
                // alert("上一张");

                // 切换到上一张，索引自减
                index = (index - 1) % imgArr.length;
                img.src = imgArr[index];
                // 设置提示文字
                info.innerHTML = "一共 " + imgArr.length + " 张图片" + "，当前第 " + (index + 1) + " 张";
            }

            next.onclick = function () {
                // alert("下一张");
                // 要修改一个元素的属性 元素.属性 = 属性值
                // 切换到上一张，索引自增
                index = (index + 1) % imgArr.length;
                img.src = imgArr[index];
                info.innerHTML = "一共 " + imgArr.length + " 张图片" + "，当前第 " + (index + 1) + " 张";
            }
        }
    </script>
</head>

<body>

    <div id="outer">
        <p id="info">一共 5 张图片，当前第 1 张</p>
        <img src="img/1.jpg" />
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>

</html>
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
猜你喜欢
