图库HTML图像显示缩略图

Question

首先，我想对我糟糕的英语说抱歉，我会尽力帮助你，帮助你帮助我。

我有一个项目用于我的网页设计师课程，我的老师要我做一个画廊html页面，但我找不到任何答案或任何接近我正在寻找的东西。

我会解释他想要的......

让我们想象一个包含3张缩略图照片的画廊页面。 然后是第一个缩略图，它是一架飞机，第二个是一艘船，第三个是一辆汽车。

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

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

Answer 1

你指的是旋转木马吗？当您单击缩略图时，是否要显示弹出窗口并具有轮播特征？从一张图片导航到另一张图片。

如果有可能你可以在jsfiddle.net上显示你的代码吗？

Answer 2

让我们说幻灯片功能看起来有点像这样：

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

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