在窗口調整大小事件時觸發不同的執行

我有以下輪播代碼[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(); 
    });

來源

2014-02-23 RedGiant

您正在每個調整大小的'＃carousel1'元素上重新定義jsCarousel。您只需在DOM準備就緒後初始化插件一次，然後只更新每個調整大小的選項'itemstodisplay'。快速查看插件源，似乎不支持它。 –

通常一個好的插件有銷燬和重新初始化方法，但我不確定你正在使用的那個。這樣，在窗口大小調整時，您可以通過銷燬解除插件並通過re-init重新啓動期望數量的項目。所以，你可能想要尋找另一個插件。 – lshettyl

你可以寫這樣的：

window.onresize = screen_resize;

編輯：你的旋轉木馬看起來不錯，如果你打電話screen_resize一次，但如果你休息多次調用它。在您的代碼中調用了screen_resize，並按照編程工作。

來源

2014-02-23 13:14:51 Jonathan

謝謝。我檢查了你的小提琴，但它似乎沒有改變窗口大小的執行。 – RedGiant

在窗口調整大小事件時觸發不同的執行

回答

相關問題