从点击给定图像更改预览图像

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; 
}