0

第一篇在这里；对遗漏的任何信息表示歉意。我是 Javascript 的完全新手，所以也提前道歉。

我目前正在创建一个带有滑块的响应式网站。

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

但我想要的是：如果用户将网站缩放到 480 像素以下，那么 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 完全陌生，所以这可能是一个简单的问题；但它仍然超出了我的范围。

4

1 回答 1

0

您可以将代码包装在这样的函数中：

function slider() {
    // your code here
}

然后在页面加载时调用：

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

以及窗口调整大小：

$(window).on('resize', function() {
    slider();
});
于 2013-05-25T13:28:44.523 回答