为滑块上显示的每个图像创建一个id(Basic jQuery slider)

create an id for each image being displayed on the slider (Basic jQuery Slider)

本文关键字:一个 id slider jQuery Basic 图像 显示 创建      更新时间:2023-09-26

需要创建一个带有每个图像"title"的动态标签,但是此标签不在幻灯片中。我正在使用插件:Basic jQuery Slider这样做的方法是标记:

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

谢谢。

这应该符合您的要求。如需演示,请参阅此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" />