Question

我想用JavaScript创建一个图像缩略图。但是当我点击图像时它不会移动。我还想列出同样的右侧怎么做。请帮助我。there

这是我的代码

<div id="imgstyle" onclick="changeImage(event)">
   <image class="imgstyle"   src="images/r1.jpg" />
   <image class="imgstyle" src="images/r2.jpg" />
   <image class="imgstyle" src="images/r3.jpg" />
   <image class="imgstyle" src="images/r4.jpg" />
   <image class="imgstyle" src="images/nw.jpg" />
</div>  <br><br>

function changeImage(event)
{
 event = event || window.event;

var targetElement = event.target || event.srcelement;

             if(targEtelement.tagname == "IMG")
             {
document.getelEmentbyid("mainImage").src = targetElement.getAttribute("src");
             }

}

</script>

Answer 1

从此处更改此行：

document.getelEmentbyid("mainImage").src = targetElement.getAttribute("src");

到

document.getElementById("mainImage").src = targetElement.getAttribute("src");

Answer 2

你的JS非常草率，它不起作用，因为属性和方法名称的大小都是错误的。

function changeImage(event) {
  event = event || window.event;
  
  var targetElement = event.target || event.srcelement;

  if (targetElement.tagName == "IMG") {
    document.getElementById("mainImage").src = targetElement.getAttribute("src");
  }
}

* {
  box-sizing: border-box;
}
.imgstyle {
  display: block;
  float: left;
  width: 20%;
}

.imgstyle + .imgstyle {
  border-left: 1px solid;
}

<img height="250" width="550" style="border:4px solid grey" src="https://placehold.it/550x250?text=A" id="mainImage" />
<br />
	
<div id="imgstyle" onclick="changeImage(event)">
  <image class="imgstyle" src="https://placehold.it/550x250?text=A" />
  <image class="imgstyle" src="https://placehold.it/550x250?text=B" />
  <image class="imgstyle" src="https://placehold.it/550x250?text=C" />
  <image class="imgstyle" src="https://placehold.it/550x250?text=D" />
  <image class="imgstyle" src="https://placehold.it/550x250?text=E" />
</div>	
<br><br>

在javascript中使用tumbnails的图库

2 个答案: