Question

使用“Jssor Slider”，我想在div中显示当前照片的名称（或“href”）。这样的事情：

HTML：

<div u="slides" ... >
    <!-- All the photos -->
</div>

<div id="photoName_Container"></div>

THE JQUERY

var name = $( ...Current Photo !... ).attr('src');

    $("#photoName_Container").text(name);

怎么做？谢谢。尼古拉斯。

Answer 1

我回答自己。我找到了如何放置一个＆＃34; id＆＃34;带号码，自动在＆＃34; img＆＃34; tag：

<div id="container_photos "u="slides" ... >
    <div><img u="image" src="url1" /></div>
    <div><img u="image" src="url2" /></div>
</div>

<script>

jQuery(document).ready(function ($) {

    var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        $("#container_photos div").each(function(){ // the "div" wrapping the "img"

            var number = $(this).index(); // get the slideIndex !!
                    $(this).children("img[u=image]").attr("id","image_" + number);

                });

    function SlideParkEventHandler(slideIndex, fromIndex) {
        var src = $("#image_" + slideIndex).attr("src");

            $("#photoName_Container").html(src);
    }

    jssor_slider1.$On($JssorSlider$.$EVT_PARK, SlideParkEventHandler);
});
</script>

问题解决了..！

Answer 2

<div u="slides" ... >
    <div><img id="image_0" u="image" src="url1" /></div>
    <div><img id="image_1" u="image" src="url2" /></div>
    ...
</div>


<script>

    jQuery(document).ready(function ($) {
        var options = {

            $AutoPlay: true,                                   //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $DragOrientation: 3                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
        };

        var jssor_slider1 = new $JssorSlider$("slider1_container", options);

        function SlideParkEventHandler(slideIndex, fromIndex) {
            var src = $("#image_" + slideIndex).attr("src");
            //do something here
        }

        jssor_slider1.$On($JssorSlider$.$EVT_PARK, SlideParkEventHandler);
    });
</script>

Answer 3

Nicolas Bocquel完美地回答了这个问题。但是有一个小的编辑（花了整整一个小时来达到这个。:(），这可能会也可能不会很重要。

$("#container_photos div").each(function(){ // the "div" wrapping the "img"

        var number = $(this).index(); // here the index start from 1 !!
        $(this).children("img[u=image]").attr("id","image_" + number); // so the "id" would be image_1 for the first slide.;

});

但是在SlideParkEventHandler函数中，slideIndex从 0 开始，所以我们得到第一张幻灯片的 undefined src。因此，我们需要从上面代码中的数字中减去1来获得正确的image_id。

$("#container_photos div").each(function(){ // the "div" wrapping the "img"

        var number = $(this).index(); // here the index start from 1 !!
        $(this).children("img[u=image]").attr("id","image_" + **(number-1)**); // so the "id" would be image_1 for the first slide.;

});

Jssor Slider：获取CURRENT照片的名称（href）？

3 个答案: