滑块过渡不工作

本文关键字：工作 | 更新日期: 2023-09-27 18:04:44

我使用Jssor滑块，我的web方法返回2个图像URL &Ajax成功函数使其正确。但"转型"并不奏效。只有第一张图片显示。Html和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 &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);
               }
           });
       }

滑块过渡不工作

在初始化jssor slider之前，您需要得到幻灯片html的良好填充。

reference: jsor -如何动态添加幻灯片?

<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>
相关文章：