JavaScript实现单击切换图片

最新推荐文章于 2024-09-22 15:18:21 发布

Roxannekkk

最新推荐文章于 2024-09-22 15:18:21 发布

阅读量1.1w

点赞数 9

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/weixin_44774255/article/details/109471690

版权

前端学习专栏收录该内容

10 篇文章

订阅专栏

本文提供了一个简单的HTML和JavaScript代码示例，用于实现网页上图片的点击切换效果。通过为图片元素绑定单击事件，并利用布尔变量作为标记来控制图片源的变化，从而实现了两张图片之间的交替显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <img id="light" src="images/timg.gif">

<script>
    /**
        1.获取图片对象
        2.绑定单击事件
        3.每次单击切换图片
            规则：如果是1 切换图片为2
            如果是2，切换图片为1
        使用标记flag完成

    */
    // 1.获取图片对象
    var light=document.getElementById("light");

    var flag=false;//代表为图1状态
    //2.绑定单击事件
    light.onclick=function(){//定义匿名方法
        if(flag){
            //判断如果是图2，则换图1;
            light.src="images/timg.gif";
            flag=false;
        }else{
            //反之
            light.src="images/timg2.gif";
            flag=true;
        }
        
    }
</script>
</body>
</html>