html点击切换图片代码

HTML点击切换图片是一个常用的功能，可以方便地在网页中展示多张图片以及实现相册的效果。下面我们来介绍几种常用的HTML点击切换图片的代码实现。

!DOCTYPE html>
    html>
    head>
    title>
    HTML点击切换图片/title>
    script>
function changeImage() {
    var image = document.getElementById('myImage');
if (image.src.match("image1")) {
    image.src = "image2.jpg";
}
 else {
    image.src = "image1.jpg";
}
}
    /script>
    /head>
    body>
    img id="myImage" onclick="changeImage()" src="image1.jpg" height="200" width="300">
    /body>
    /html>
    

上面的代码使用了JavaScript来实现图片的切换。首先使用一个标签显示图片，标签的id为myImage，点击时会执行changeImage函数。函数中首先使用document.getElementById('myImage')获取图片对象，判断图片src属性中是否包含"image1"，如果包含则将图片切换为"image2.jpg"，否则切换为"image1.jpg"。

!DOCTYPE html>
    html>
    head>
    title>
    HTML点击切换图片/title>
    /head>
    body>
    input type="button" onclick="changeImage()" value="点击切换图片">
    img id="myImage" src="image1.jpg" height="200" width="300">
    script>
function changeImage() {
    var image = document.getElementById('myImage');
if (image.src.match("image1")) {
    image.src = "image2.jpg";
}
 else {
    image.src = "image1.jpg";
}
}
    /script>
    /body>
    /html>
    

上面的代码使用了一个标签作为点击按钮，通过调用changeImage函数实现图片的切换。

!DOCTYPE html>
    html>
    head>
    title>
    HTML点击切换图片/title>
    /head>
    body>
    ul>
    li onclick="changeImage('image1.jpg')">
    图片1/li>
    li onclick="changeImage('image2.jpg')">
    图片2/li>
    /ul>
    img id="myImage" src="image1.jpg" height="200" width="300">
    script>
function changeImage(image) {
    var img = document.getElementById('myImage');
    img.src = image;
}
    /script>
    /body>
    /html>
    

上面的代码使用了一个列表，每个列表项都是一个图片的名称，并且使用onclick事件调用changeImage函数来切换图片。当点击一个列表项时，传递对应的图片名称作为函数的参数，函数中使用document.getElementById('myImage')获取图片对象，并将src属性设为传递进来的图片名称。

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