js 简单的点击却换图片事件

最新推荐文章于 2023-05-30 22:55:51 发布

大闸蟹~

最新推荐文章于 2023-05-30 22:55:51 发布

阅读量316

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/YCHH1/article/details/125659466

版权

javascript 前端开发语言

js 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<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>
</head>

<body>
    <button id="prev">上一张</button>
    <img src="./images/0.jpg" alt="" id="img">
    <button id="next">下一张</button>


    <script>
        function $(id) {
            return document.getElementById(id)
        }
        // 获取相关元素
        var pres = $("prev");
        var img = $("img");
        var next = $("next");

        // 信号量:随着信号的强弱有一定的变化
        // 定义一个变量,来统计信号的编号
        var count = 0;

        // 设置下一张按钮的点击事件,点击一次 信号加1 
        next.onclick = function () {
            if (++count > 5) {
                count = 0;
            }

            img.src = './images/' + count + ".jpg"
        }

        pres.onclick = function () {
            if (--count < 0) {
                count = 5
            }

            img.src = "./images/" + count + ".jpg"
        }

    </script>
</body>

</html>