Javascript 图库HTML图像显示缩略图

首先，我想为我的英语不好说声对不起，我会尽我最大的努力寻求帮助，帮助你帮助我

嗯，我有一个网页设计师课程的项目，我的老师想让我做一个图库html页面，但我找不到任何答案或任何接近我所寻找的内容

好吧，我会解释他想要什么

让我们想象一个包含3张缩略图的图库页面。 然后第一个缩略图是飞机，第二个是船，第三个是汽车

现在，如果我点击飞机缩略图，它应该只显示飞机的幻灯片，如果我点击汽车缩略图，它应该只显示幻灯片中的汽车图像。。。有人明白我的意思吗？如果不是，我会更好地解释。 非常感谢，再次为我糟糕的英语和解释道歉

这是我现在拥有的，但当我点击第一张图片时，它会打开我点击的那张，当我点击下一张时，转到旁边的下一张

---

您指的是旋转木马吗？当您单击缩略图时，是否希望弹出框显示并具有旋转木马特征？从一张图片导航到另一张图片

---

如果可能的话，您能在jsfiddle.net中显示您的代码吗

假设幻灯片功能看起来有点像这样：

function slideShow() {
    var slideShowImages = new Array();

    slideShow.prototype.load = function(img){ /*loads img into array*/ };
    slideShow.prototype.start = function(){ /*starts the slideshow*/ };
    slideShow.prototype.stop = function() { /*stops slideshow*/ };
    slideShow.prototype.empty = function() { /*empties array*/ };
};

要确保仅显示特定车辆的图像，请将其放置在阵列中：

var airplanes = new Array();
var cars = new Array();
var boats = new Array();

然后，在加载所有图像时，将它们放置在正确的阵列中：

var boatImg = new Image();
boatImg.src = theSourceOfImage;
boatImg.addEventListener('load', function() { boats.push(boatImg) }); 
//etc etc.

将单击处理程序附加到缩略图

SlideShow = new slideShow();

$("#boatThumbNailId").click(function() { 
   //now place all of the pictures from the boat array in the slideshow
   for(var i = 0; i < boats.length; i++)
       SlideShow.load(boats[i]);
   //then just start the slideShow
   SlideShow.start();
});

---

我希望这会对你有所帮助，祝你好运。

你能告诉我们你已经尝试了什么吗？@MaxLangerak我编辑了我的帖子，请看一下。。。对不起，英语不好，我想点击飞机图片，它会在弹出式画廊中打开，只显示飞机图片，即使有汽车或船只的缩略图，这就是我的意思是，是这样的，但我以前从未见过，你能帮我完成我的项目吗？你有电子邮件、facebook、skype或其他我们可以联系的东西吗？给我发一封电子邮件，我会看看我能做些什么，我的电子邮件在我的网页上。我在你的网页上找不到你的电子邮件，对不起，你在吗？我在你的网页上找不到你的电子邮件，请帮助我