javascript - 单击时图像源中的数字递增

Question

基本上，我想为我正在开发的 JQuery 图片库创建下一个和上一个按钮。每个按钮分别有一个 id“下一个”和“上一个”。我想做的是更改图库中主图像源中的数字(其 id 为 mainImg)。我已经能够定位每个图像源中的数字，但我似乎无法正确增加它，然后用新的增量数字替换当前图像的源数字。我尝试使用 while 循环、for 循环和 if 语句，但它们都不能正常工作。要查看我迄今为止拥有的画廊，我已将其上传到此处:http://tiger.towson.edu/~abarso2/463/projecta/index.html如果您进入我的 script.js 文件，您会在底部看到一个被注释掉的 block 。这是我到目前为止所拥有的函数，它以图像源中的数字为目标并将其解析为整数。预先感谢您的帮助。

这是我目前拥有的:

(function(){
    var mainImg = $('#mainImg').attr('src');
    var mainImgStr = mainImg.charAt(mainImg.length - 5);
    var mainImgNum = parseInt(mainImgStr);
        $('#next').click(function(){

        });
}());

Answer 1

这应该可以解决您的问题

$(function(){
    var mainImg = $('#mainImg');
    var slidshow = $('#slideShow');

    $('#next').click(function(){
        var src = mainImg.attr('src').replace('thumb','shot');
        var next = $('img[src="' + src +'"]', slidshow).next();
        if(next.length){
            mainImg.attr('src',next.attr('src').replace('thumb','shot'));
        }
    });

    $('#prev').click(function(){
        var src = mainImg.attr('src').replace('thumb','shot');
        var prev = $('img[src="' + src +'"]', slidshow).prev();
        if(prev.length){
            mainImg.attr('src',prev.attr('src').replace('thumb','shot'));
        }
    });
});