jquery 具有多个示例的点击式图像库(上一个/下一个)

hrirmatl  于 2023-05-22  发布在  jQuery
关注(0)|答案(1)|浏览(120)

我是一个寻求帮助的新手。我想做的是:
我有大约九个项目列在我的主页上,每个项目都有一个大图片。每个项目都有大约五个其他未显示的图像。
我试图找出如何点击主图像,并让它加载下一个图像在其位置,停留在同一页面上,没有过渡需要。我有文本链接到一边,也控制'下一个'或'上一个'的图像,如果你点击他们。
我想图像(除了9个初始)加载,因为你需要他们,所以我不加载50图像的权利,从一开始。
我也很头疼,试图在同一页面上制作九个独立的画廊/幻灯片。
现在,我正在使用一个臃肿,混乱的javascript,我把它整合在一起,但它在浏览器上不稳定,我觉得它有很多不必要的代码。所以我不会费心张贴它,我想我需要从头开始。
我觉得这应该是相对简单的,但我找不到任何插件或例子,做这个简单的任务。
我是一个完全的业余爱好者,但我很想学习如何实际编码,所以如果有人知道任何教程,可以帮助我,我会非常感激!在我的脑海中,它应该只是一些简单的jQuery,但我不知 prop 体如何做到这一点。
感谢您的任何帮助!

42fyovps

42fyovps1#

如果你必须重新发明轮子,这里有一个简单的例子:
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;
});

相关问题