아래 코드는 웹 페이지의 미리보기 이미지 및 이미지 목록에 대한 코드를 나타냅니다.
<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>
자바 스크립트 기능을 사용하여 이미지 목록의 클릭 이벤트에 대한 미리보기 이미지를 업데이트하도록 도와주세요.
감사합니다.
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;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다