0

我正在尝试制作一个简单的图片库。这就是我现在所拥有的：

现场演示：http: //jsfiddle.net/rgvqA/

var NumberOfImages = 7;

var img = new Array(NumberOfImages);

img[0] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number0.jpg";
img[1] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number1.jpg";
img[2] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number2.jpg";
img[3] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number3.jpg";
img[4] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number4.jpg";
img[5] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number5.jpg";
img[6] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number6.jpg";

var imgNumber = 0

    function NextImage() {
        imgNumber++;
        if (imgNumber == NumberOfImages) {
            imgNumber = 0;
        }    
        document.images["largeImage"].src = img[imgNumber];
    }

    function PreviousImage() {
        imgNumber--;
        if (imgNumber < 0) {
            imgNumber = NumberOfImages - 1;
        }
        document.images["largeImage"].src = img[imgNumber];
    }

$(document).ready(function() {
    $('#thumbs').delegate('img', 'click', function() {
        imgNumber = $(this).attr('id');
    });
});

$('#thumbs').delegate('img', 'click', function () {
    $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
    $('#description').html($(this).attr('alt'));
});

问题：当我单击next和previous按钮时，描述的替代文本不会相应改变。仅当我单击缩略图时才会这样做。

如何将alt文本更新为当前显示的任何图像？

4

3 回答 3

0

图片标题没有通过单击箭头按钮设置，因为它们调用的函数 (NextImage和PreviousImage) 没有任何更新它的代码。

您可以使用它imgNumber来检索正确的拇指图像，获取它的替代文本，并使用它更新描述元素：

$('#description').html($('#'+imgNumber).attr('alt'));
于 2013-02-18T21:50:48.703 回答
0

http://jsfiddle.net/rgvqA/2/ 您只是忘记$('#description')在 next 和 prev 函数中更新您的元素

于 2013-02-18T21:51:55.793 回答
0

这是因为你的代码导致的 ( $('#description').html($(this).attr('alt'));) 其中this指的是小拇指。因此，您正在从拇指中获取替代文本。

尝试像上面对图像所做的那样在数组中创建描述。

var desc = new Array(NumberOfImages);

`desc[0] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number0.jpg";
desc[1] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number1.jpg";
desc[2] = "http://www.kidsmathgamesonline.com/images/pictures/numbers600/number2.jpg";
desc[3] = "http://www.kidsmath`

在这里打电话

    function NextImage() {
        imgNumber++;
        if (imgNumber == NumberOfImages) {
        imgNumber = 0;
        }    
        document.images["largeImage"].src = img[imgNumber];
        var desc = desc[imgNumber];
        $('#description').text(desc);
    }

    function PreviousImage() {
        imgNumber--;
        if (imgNumber < 0) {
        imgNumber = NumberOfImages - 1;
        }
        document.images["largeImage"].src = img[imgNumber];
        var desc = desc[imgNumber];
        $('#description').text(desc);
    }
于 2013-02-18T21:59:13.150 回答