具有多个实例的点击式图片库（上一个/下一个）

Question

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

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

我正在尝试弄清楚如何单击主图像并让它在其位置加载下一个图像，保持在同一页面上，不需要过渡。如果您单击它们，我还有指向侧面的文本链接来控制“下一个”或“上一个”图像。

我希望根据需要加载图像（除了最初的 9 张），所以我不会从一开始就加载 50 张图像。

尝试在同一页面上制作九个独立的画廊/幻灯片也让我很头疼。

现在，我正在使用一个臃肿、凌乱的 javascript，我将它拼凑在一起 r 来完成它，但它在浏览器中不稳定，我觉得它有很多不必要的代码。所以我就不费心贴了，我想我需要从头开始。

我觉得这应该相对简单，但我在任何地方都找不到任何插件或示例来完成这个简单的任务。

我是一个完全的业余爱好者，但我很想学习如何实际编写代码，所以如果有人知道任何可以帮助我的教程，我将不胜感激！我的想法是它应该只是一些简单的 jQuery，但我不确定该怎么做。

感谢您的帮助！

Answer 1

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

http://jsfiddle.net/KDnPX/

HTML：

<img src="">
    <a href="#" class="prevImg">Previous</a>
    <a href="#" class="nextImg">Next</a>

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