0

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

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

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

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

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

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

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

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

谢谢你的帮助！

4

1 回答 1

0

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

http://jsfiddle.net/KDnPX/

html:

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

查询：

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;
});
于 2013-04-26T18:30:33.017 回答