通过多个实例点击图像库(上一个/下一个)

Click-though Image Gallery (prev/next) with multiple instances

本文关键字：上一个 下一个 图像 实例      更新时间：2023-09-26

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

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

我想弄清楚如何点击主图像，并让它加载下一个图像在其位置，停留在同一页面上，不需要过渡。我有文字链接到一边也控制"下一个"或"以前"的图像，如果你点击它们。

我希望图像(除了九个初始)加载，因为你需要他们，所以我没有从一开始就加载50个图像。

试图在同一页面上制作9个独立的图库/幻灯片也是一件令人头痛的事情。

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

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

我是一个完全的业余爱好者，但我很想学习如何实际编码，所以如果有人知道任何教程，可以帮助我，我将非常感激!在我的脑海里，它应该只是一些简单的jQuery，但我不确定究竟如何做到这一点。

谢谢你的帮助!

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

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;
});
相关文章：