Question

首先发布在这里;对任何错过的信息道歉。我是Javascript的新手，所以也很高兴道歉。

我目前正在创建一个带滑块的自适应网站。

滑块在较大的设备上占据了网站的整个背景，但是当窗口小于480px时，我希望滑块缩小到较小的区域。在设备首次加载页面时，我的工作正常。正在使用正确的滑块设置。

但我想要的是：如果用户将网站缩放到480px以下，那么javascript将在此时改变（如CSS媒体查询）以使用新的滑块设置。目前，如果您缩小到低于或高于阈值，则必须刷新页面才能获得新的滑块设置。

这是我设法从网站上提出的其他问题中找到的一些代码，但它不允许在调整窗口大小时进行更改，仅在刷新时：

<script>
$(document).ready(function(){

if($(window).width()>480){
$(".slideshow").startslider({
    slideTransitionSpeed: 500,
    slideTransitionEasing: "easeOutExpo",
    sliderFullscreen: true,
    sliderAutoPlay: false,
    sliderResizable: true,
    slidesDraggable: false,
    slideImageScaleMode: "fill",
    showTimer: false,
    showPause: false,
    showDots: false
    });
return;
} else {

$(".slideshow").startslider({
    slideTransitionSpeed: 500,
    slideTransitionEasing: "easeOutExpo",
    sliderFullscreen: false,
    sliderAutoPlay: false,
    sliderResizable: true,
    slidesDraggable: true,
    slideImageScaleMode: "fill",
    showTimer: false,
    showPause: false,
    showDots: false
    });
}
});
</script>

我是Javascript的新手，所以这可能是一个简单的问题;但它完全超出了我。

Answer 1

您可以将代码包装在如下函数中：

function slider() {
    // your code here
}

然后在页面加载时调用：

$(function(){
    slider();
});

以及窗口调整大小：

$(window).on('resize', function() {
    slider();
});

改变窗口大小的Javascript

1 个答案: