Question

我有以下轮播代码 [fiddle] ，根据屏幕尺寸返回要显示的不同数量的项目。

$(function() {

var mini = 1000;
var big = 1280;
     if (window.screen.availWidth < mini) {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
}
else {

$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 5, orientation: 'h' });    
    }
});

我想在其中添加.resize函数，因此在调整窗口大小时项目数也会发生变化。我按照 example 进行了操作但无法正常工作。有人请告诉我如何在我的例子中添加调整大小功能吗？

我的尝试失败（demo）：

function screen_resize() {
 var h = parseInt(window.innerHeight);
    var w = parseInt(window.innerWidth);

if (w <= 800) {
$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 3, orientation: 'h' });
    }
else {

$('#carousel1').jsCarousel({ onthumbnailclick: function(src) { load(src); }, autoscroll: true, circular: true, masked: false, itemstodisplay: 5, orientation: 'h' });   

}
}
// if window resize call responsive function
$(window).resize(function(e) {
    screen_resize();
});
// call responsive function on default :)
$(document).ready(function(e) {
    screen_resize();
    });

Answer 1

你可以这样写：

window.onresize = screen_resize;

编辑：如果您调用screen_resize一次，您的轮播会很好看，但如果您多次调用它，则会中断。 screen_resize在您的代码中被调用，并按程序运行。

在窗口调整大小事件上触发不同的执行

1 个答案: