html点击切换两张图片代码

对于HTML网页设计中，图片的展示是一个非常重要的组成部分，而点击切换图片是一种常见的需求，那么如何实现呢？下面就为大家介绍如何用HTML点击切换两张图片的代码实现。

!DOCTYPE html>
    html>
    head>
    meta charset="UTF-8">
    title>
    点击切换图片/title>
    style>
img {
    width: 300px;
    height: 200px;
}
    /style>
    /head>
    body>
    p>
    点击切换两张图片：/p>
    img id="pic" src="pic1.jpg" />
    button onclick="changePic()">
    点击切换/button>
    script>
function changePic() {
    var img = document.getElementById("pic");
if (img.src.match("pic1.jpg")) {
    img.src = "pic2.jpg";
}
 else {
    img.src = "pic1.jpg";
}
}
    /script>
    /body>
    /html>
    

代码解释：

首先，使用img> 标签显示一个初始的图片(pic1.jpg)。

接着，加入一个按钮，使用onclick事件调用changePic()函数，在函数中通过JavaScript获取img> 标签的id(pic)，判断当前图片是否为pic1.jpg的地址，如果是则将图片地址修改为pic2.jpg，否则修改为pic1.jpg。

最后，在head> 标签中定义了一个CSS样式，调整图片大小： width: 300px; height: 200px;

这样就可以实现点击切换两张图片了，是不是非常简单呢？

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！