Image 单击具有多个实例的图像库（上一个/下一个）

我是一个寻求帮助的新手。 我想做的是：

我的主页上列出了大约九个项目，每个项目都有一个大图像。每个项目都有大约五个其他未显示的图像

我试图弄清楚如何点击主图像，让它在它的位置加载下一个图像，保持在同一页上，不需要转换。我有文本链接到侧面，也可以控制“下一个”或“上一个”图像，如果你点击它们

我希望图像（除了9个首字母）可以根据需要加载，所以我不会从一开始就加载50个图像

在同一页上制作九个独立的图库/幻灯片也让我头疼

现在，我正在使用一个臃肿、凌乱的javascript，我将其拼凑在一起完成rto，但它在不同浏览器之间不稳定，我觉得它有很多不必要的代码。所以我不想发帖了，我想我需要从头开始

我觉得这应该是相对简单的，但我找不到任何插件或例子在任何地方做这个简单的任务

我完全是个业余爱好者，但我很想学习如何编写代码，所以如果有人知道任何可以帮助我的教程，我将非常感激！在我的脑海中，它应该只是一些简单的jQuery，但我不确定具体如何实现它

---

谢谢你的帮助

如果你必须重新发明轮子，这里有一个简单的例子：

Html:

Jquery：

var json = '{"0":"http://mw2.google.com/mw-panoramio/photos/medium/14748463.jpg", 
"1":"http://mw2.google.com/mw-panoramio/photos/medium/3840183.jpg", 
"2":"http://mw2.google.com/mw-panoramio/photos/medium/25214140.jpg"}';

var images = jQuery.parseJSON(json);

// load first image
$('img').attr('src', images[0]);

var currImg = 0;

$('.prevImg').click(function (){
    if (currImg - 1 >= 0)
    {
        // show previous image
        $('img').attr('src', images[currImg - 1]);
        currImg--;
    }
    return false;
});

$('.nextImg').click(function (){
    if (currImg + 1 < Object.keys(images).length)
    {
        // show previous image
        $('img').attr('src', images[currImg + 1]);
        currImg++;
    }
    return false;
});

var json='{“0”：http://mw2.google.com/mw-panoramio/photos/medium/14748463.jpg", 
"1":"http://mw2.google.com/mw-panoramio/photos/medium/3840183.jpg", 
"2":"http://mw2.google.com/mw-panoramio/photos/medium/25214140.jpg"}';
var images=jQuery.parseJSON（json）；
//加载第一个图像
$（'img'）.attr（'src'，images[0]）；
var currImg=0；
$（'.prevImg'）。单击（函数（）{
如果（当前值-1>=0）
{
//显示以前的图像
$（'img'）.attr（'src'，images[currImg-1]）；
货币--；
}
返回false；
});
$（'.nextImg'）。单击（函数（）{
if（currImg+1

我觉得没有理由重新发明轮子，就用这个吧

var json = '{"0":"http://mw2.google.com/mw-panoramio/photos/medium/14748463.jpg", 
"1":"http://mw2.google.com/mw-panoramio/photos/medium/3840183.jpg", 
"2":"http://mw2.google.com/mw-panoramio/photos/medium/25214140.jpg"}';

var images = jQuery.parseJSON(json);

// load first image
$('img').attr('src', images[0]);

var currImg = 0;

$('.prevImg').click(function (){
    if (currImg - 1 >= 0)
    {
        // show previous image
        $('img').attr('src', images[currImg - 1]);
        currImg--;
    }
    return false;
});

$('.nextImg').click(function (){
    if (currImg + 1 < Object.keys(images).length)
    {
        // show previous image
        $('img').attr('src', images[currImg + 1]);
        currImg++;
    }
    return false;
});