Question

我使用Jssor滑块，我的网页方法返回2张图片网址＆amp; Ajax成功函数正确使用它。但是转换不起作用＆amp;只有第一张图片显示。 Html＆amp; Css部分

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">

<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; overflow: hidden;">
    <div id="HomeImgSliders"> </div>

   <%--  <div><img u="image" src="http://jssor.com/img/photography/003.jpg" /></div>-->

</div>

<!-- Arrow Navigator Skin Begin -->
<style>
    /* jssor slider arrow navigator skin 03 css */
    /*
        .jssora03l              (normal)
        .jssora03r              (normal)
        .jssora03l:hover        (normal mouseover)
        .jssora03r:hover        (normal mouseover)
        .jssora03ldn            (mousedown)
        .jssora03rdn            (mousedown)
        */
    .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn {
        position: absolute;
        cursor: pointer;
        display: block;
        background: url(http://jssor.com/img/a17.png) no-repeat;
        overflow: hidden;
    }

    .jssora03l {
        background-position: -3px -33px;
    }

    .jssora03r {
        background-position: -63px -33px;
    }

    .jssora03l:hover {
        background-position: -123px -33px;
    }

    .jssora03r:hover {
        background-position: -183px -33px;
    }

    .jssora03ldn {
        background-position: -243px -33px;
    }

    .jssora03rdn {
        background-position: -303px -33px;
    }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;"></span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px"></span>
<!-- Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">jQuery Slider</a>

这是我的Jquery＆amp; JSON / Ajax调用部分

<script>
$(function () {
    LoadHomeImageSliders();
});

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

    var options = {
        $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)
        $AutoPlay: true,
        $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
            $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
            $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
            $AutoCenter: 0,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
            $Steps: 1,                                    //[Optional] Steps to go for each navigation request, default value is 1
            $AutoPlay: true
        }


    };

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


function LoadHomeImageSliders() {
    debugger;
    var url = '<%= ResolveUrl("~/WebMethods.aspx/GetHomeImageSliders") %>';

           $.ajax({
               url: url,
               type: "POST",
               dataType: "json",
               contentType: "application/json; charset=utf-8",
               success: function (Result) {
                   $.each(Result.d, function (key, value) {

                       var html = "<img u=image src=" + value.ImagePath + "/>";//<-- Image Path/paths comes here Correctly

                       $("#HomeImgSliders").append(html);

                   });


               },


               error: function (e, x) {
                   alert(x.ResponseText);
               }
           });
       }

Answer 1

在初始化jssor滑块之前，你可以很好地填充幻灯片。

参考：Jssor - how to add slides dynamically?

<script>

    jQuery(document).ready(function ($) {
        LoadHomeImageSliders();
    });


    function LoadHomeImageSliders() {
        debugger;
        var url = '<%= ResolveUrl("~/WebMethods.aspx/GetHomeImageSliders") %>';

        $.ajax({
            url: url,
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (Result) {
                $.each(Result.d, function (key, value) {

                    var html = "<img u=image src=" + value.ImagePath + "/>";//<-- Image Path/paths comes here Correctly

                    $("#HomeImgSliders").append(html);

                });


                var options = {
                    $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)
                    $AutoPlay: true,
                    $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                        $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                        $AutoCenter: 0,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                        $Steps: 1,                                    //[Optional] Steps to go for each navigation request, default value is 1
                        $AutoPlay: true
                    }


                };

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

            },


            error: function (e, x) {
                alert(x.ResponseText);
            }
        });
    }
</script>

Jssor Sliders过渡不起作用

1 个答案: