JavaScript 缩略图图片库

Question

请检查我的代码。 它几乎可以工作，但是每当我单击其中一个缩略图时，它都不会显示图像。

 <script> function thumbChange(num){ var thumb = "gata" + num + ".jpg"; document.getElementById("mainImg").src = thumb; } </script>

 <div class="main"> <img id="mainImg" src="biokovo.jpg" /> </div> <ul class="thumbs"> <li onclick="thumbChange(0)"><img src="biokovo.jpg"></li> <li onclick="thumbChange(1)"><img src="grac.jpg"></li> <li onclick="thumbChange(2)"><img src="lokvica.jpg"></li> <li onclick="thumbChange(3)"><img src="hike.jpg"></li> <li onclick="thumbChange(4)"><img src="gradac.jpg"></li> </ul>

Answer 1

这是一个工作示例，我做了什么，我将拇指作为 img src 传递。 我将原始大小的 img url 作为函数的参数传递。

然后在函数内部，我只是将 img url 传递给 img 标签。

 <img id="mainImg" src="https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1"> </div> <ul class="thumbs"> <li onclick='thumbChange("https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/70083/frog-macro-amphibian-green-70083.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li> <li onclick='thumbChange("https://images.pexels.com/photos/70850/butterflies-insect-bezkregowiec-macro-70850.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/70850/butterflies-insect-bezkregowiec-macro-70850.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li> <li onclick='thumbChange("https://images.pexels.com/photos/929773/pexels-photo-929773.jpeg?auto=compress&cs=tinysrgb&w=350&h=350&dpr=1")'><img src ="https://images.pexels.com/photos/929773/pexels-photo-929773.jpeg?auto=compress&cs=tinysrgb&w=100&h=100&dpr=1"></li> </ul> <script> function thumbChange(img){ document.getElementById("mainImg").src = img; } </script>

很抱歉，img 网址太长了。 当然，您可以用较短的替换它们。