Question

以下代码表示预览图像的代码和网页中的图像列表。

<div class="col-lg-5 text-center">
                    <img src="img/1.jpeg">  //preview image
<hr>
                    <div class="col-lg-3">
                        <img onclick="imagereset()" id="1" src="img/1.jpeg">
                    </div>
                    <div class="col-lg-3">
                        <img onclick="imagereset()" id="2" src="img/2.jpeg">
                    </div>
                    <div class="col-lg-3">
                        <img onclick="imagereset()" id="3" src="img/3.jpeg">
                    </div>
                    <div class="col-lg-3">
                        <img onclick="imagereset()" id="4" src="img/4.jpeg">
                    </div>
                </div>

请使用javascript函数帮助我更新任何图片列表的点击事件的预览图片。

谢谢。

Answer 1

更改HTML代码，将id添加到预览图片，并将每个图片的引用传递给imagereset()函数：

<div class="col-lg-5 text-center">
    <img id="preview-img" src="img/1.jpeg">  <!--preview image-->
    <hr>
    <div class="col-lg-3">
        <img onclick="imagereset(this)" id="1" src="img/1.jpeg">
    </div>
    <div class="col-lg-3">
        <img onclick="imagereset(this)" id="2" src="img/2.jpeg">
    </div>
    <div class="col-lg-3">
        <img onclick="imagereset(this)" id="3" src="img/3.jpeg">
    </div>
    <div class="col-lg-3">
        <img onclick="imagereset(this)" id="4" src="img/4.jpeg">
    </div>
</div>

这样，你可以这样简单地实现这个功能：

function imagereset(elem) {
    var newSrc;
    switch (elem.id) {
        case "1": newSrc = ...; break;
        ...
    }
    document.getElementById("preview-img").src = newSrc;
}

单击时更改给定图像的预览图像

1 个答案: