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

これはコードが原因で発生します ( $('#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 に答える