Question

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

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

我试图弄清楚如何点击主图像并让它在其位置加载下一张图像，保持在同一页面上，不需要转换。我有文字链接到一边也控制下一个＆＃39;或者之前的＆＃39;如果你点击它们的图像。

我喜欢图片（除了九个首字母）以便根据需要加载，所以我从一开始就没有加载50张图片。

我也很难在同一页上制作九个独立的画廊/幻灯片。

现在，我正在使用一个臃肿，凌乱的javascript，我一起攻击它完成它，但它在浏览器中不稳定，我觉得它有很多不必要的代码。所以我不打算发布它，我想我需要从头开始。

我觉得这应该相对简单，但我无法在任何地方找到执行这项简单任务的插件或示例。

我是一名业余爱好者，但我很乐意学习如何编写代码，所以如果有人知道任何可以帮助我的教程，我会非常感激！我觉得它应该是一些简单的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;
});

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

1 个答案: