Question

我在下面使用的代码仅在页面加载时重新调整图像滑块的大小，但如果窗口大小已更改则不会重新调整大小，如果移动设备的方向发生更改，则不会重新调整大小。

<script>
    jQuery(document).ready(function ($) {
        var options = { $AutoPlay: true };
        var jssor_slider1 = new $JssorSlider$('imageslider', options);


        function ScaleSlider() {
            var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
            if (parentWidth)
                jssor_slider1.$ScaleWidth(parentWidth);
            else
                window.setTimeout(ScaleSlider, 30);
        }

        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);

    });
</script>

先谢谢你的陪审员

Answer 1

对于jquery版本，

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
    var bodyWidth = document.body.clientWidth;
    if (bodyWidth)
        jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
    else
        window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end

对于没有jQuery版本，

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
    var bodyWidth = document.body.clientWidth;
    if (bodyWidth)
        jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
    else
        $Jssor$.$Delay(ScaleSlider, 30);
}

ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);

$Jssor$.$AddEvent(window, "resize", $Jssor$.$WindowResizeFilter(window, ScaleSlider));
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end

Answer 2

我用这个来涵盖重新调整大小和方向的变化：

window.addEventListener("orientationchange", function() {ScaleSlider();}, false);
window.addEventListener("resize", function() {ScaleSlider();}, false);

JSSOR：只适用于页面加载的屏幕，而不适用于调整大小

2 个答案: