javascript - スライダーに表示されている各画像の ID を作成します (基本的な jQuery スライダー)

Question

各画像の「タイトル」で動的ラベルを作成する必要がありますが、このラベルはスライド内にはありません。私はプラグインを使用しています: Basic jQuery Slider これを行う方法は次のようになります:

<p><script>document.getElementById("ID of the current image being displayed");</script></p>

ありがとう。

Answer 1

これは要件に適合するはずです。デモンストレーションについては、このFiddleを参照してください。

JavaScript:

$(document).ready(function () {

    function displayTitle() {
        var imageTitle = $('img:visible').attr('title'); // get the title from the visible image
        $('#title').html('Title: ' + imageTitle);
    }

    $('input:radio').bind('click', function () {
        var selectedIndex = $(this).val();

        $('img').hide(); // hide all images
        $('img').eq(selectedIndex).show(); // show image selected by radiobutton

        displayTitle();
    });

    displayTitle();
});

HTML:

<div id="title"></div>

<input type="radio" name="display-image" value="0">display image-1
<input type="radio" name="display-image" value="1">display image-2
<input type="radio" name="display-image" value="2">display image-3

<br />

<img title="image-1" alt="image-1"  />
<img title="image-2" alt="image-2" style="display:none" />
<img title="image-3" alt="image-3" style="display:none" />