2.DOM练习：轮播图切换图片

最新推荐文章于 2023-04-01 21:30:19 发布

美美| ू•ૅω•́)ᵎᵎᵎ

最新推荐文章于 2023-04-01 21:30:19 发布

阅读量159

点赞数

分类专栏： DOM 文章标签： html css html5

本文链接：https://blog.csdn.net/lazylYYY/article/details/119548021

版权

DOM 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tpqh {
            width: 500px;
            text-align: center;
            padding: 10px;

            margin: auto;
            margin-top: 100px;
        }
    </style>
    <script>
        window.onload = function () {
            let a1 = document.getElementById('a1')
            let a2 = document.getElementById('a2')
            let tp = document.getElementById('tp')
            let index = document.getElementById('index')
            // alert(index.innerHTML)
            let haha = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"]
            let count = 0;
            //下一张
            a2.onclick = function () {
                count++;
                if (count == haha.length) {
                    count = 0;
                }

                tp.src = haha[count];
                index.innerHTML = '这是第' + (count + 1) + '张，一共5张'
            }
            //上一张
            a1.onclick = function () {
                if (count == 0) {
                    count = haha.length - 1;
                }
                count--;
                tp.src = haha[count];
                index.innerHTML = '这是第' + (count + 1) + '张，一共5张'
            }
        }

    </script>
</head>

<body>
    <div class="tpqh">
        <p id='index'>这是第1张一共5张</p>
        <img id='tp' src="img/1.jpg" alt="">
        <button id="a1">上一张</button>
        <button id="a2">下一张</button>
    </div>
</body>

美美| ू•ૅω•́)ᵎᵎᵎ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.DOM练习：轮播图切换图片

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>...
复制链接

扫一扫