master

分支 (1)

管理

管理

master

js_study
/
图片轮播.html

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 500px;
            margin: 50px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="outer">
        <p id="info"></p>
        <img src="/img/01.jpg" alt="01">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
<script>
    window.onload = function () {
        // 点击按钮切换图片

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

        // 要切换图片就是修改img标签的src属性

        // 获取img标签，返回的是数组
        var img = document.getElementsByTagName("img")[0];

        // 创建一个数组用来保存图片的路径
        var imgArr = ["/img/01.jpg", "/img/02.jpg", "/img/03.jpg", "/img/04.jpg", "/img/05.jpg"]

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

        // 设置提示文字，获取id为info的p元素
        var info = document.getElementById("info");
        info.innerHTML =  "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";

        // 分别为两个按钮绑定单击响应函数
        prev.onclick = function () {
            // 切换到上一张时，索引自减
            index--;

            // 判断index是否小于0
            if (index < 0) {
               index = imgArr.length-1;
            }

            // alert("上一张");
            img.src = imgArr[index];

             // 点击按钮以后，重新设置第几张
             info.innerHTML =  "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
        }

        next.onclick = function () {
            // alert("下一张");
            // 切换图片就是修改img的src属性
            // 要修改一个元素的属性 元素.属性 = 属性值

            index++;

            if (index > imgArr.length-1) {
                 index = 0;
            }
            img.src = imgArr[index];

            // 点击按钮以后，重新设置第几张
            info.innerHTML =  "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
        }
    }
</script>

</html>