jQuery窗口大小調整

Question

$(document).ready(function(){  
WinSize = $(window).width(); 
var currentPosition = 0; 
var slideWidth = WinSize; 

$(function(){ 
    $(window).resize(function(){ 
     slideWidth = WinSize = $(window).width(); 
    }); 
});  


var slides = $('.slide'); 
var numberOfSlides = slides.length; 

// Remove scrollbar in JS 
$('#slidesContainer').css('overflow', 'hidden'); 

// Wrap all .slides with #slideInner div 
slides 
.wrapAll('<div id="slideInner"></div>') 
// Float left to display horizontally, readjust .slides width 
.css({ 
    'float' : 'left', 
    'width' : slideWidth 
}); 

// Set #slideInner width equal to total width of all slides 
$('#slideInner').css('width', slideWidth * numberOfSlides); 

// Insert controls in the DOM 
$('#PageBG') 
.prepend('<a href="#" class="control" id="previous"><span>Previous</span></a>') 
.append('<a href="#" class="control" id="next"><span>Next</span></a>'); 

// Hide left arrow control on first load 
manageControls(currentPosition); 

// Create event listeners for .controls clicks 
$('.control') 
.bind('click', function(){ 
    // Determine new position 
    currentPosition = ($(this).attr('id')=='next') ? currentPosition+1 : currentPosition-1; 

    // Hide/show controls 
    manageControls(currentPosition); 
    // Move slideInner using margin-left 
    $('#slideInner').animate({ 
     'marginLeft' : slideWidth*(-currentPosition) 
    },800, 'linear'); 
}); 

$('.SlideSelect') 
.bind('click', function(){ 

// Move slideInner using margin-left 
$('#slideInner').animate({ 
    'marginLeft' : slideWidth*(-$(this).attr('id')) 
},800, 'linear'); 

}）;

我希望slideWidth根據窗口大小進行更改，因此當窗口大小改變時，slideWidth會發生變化，但我似乎無法使其工作。

有誰知道爲什麼？

Answer 1

它不會更新其他變量，slideWidth是不同的，不同的變量，在WinSize值的副本時，它最初設定，你需要這樣的事情在你的功能更新兩個：

$(function(){ 
    $(window).resize(function(){ 
     slideWidth = WinSize = $(window).width(); 
    }); 
}); 

確保slideWidth在範圍內，以便更新相同的slideWidth變量，而不是創建全局變量。或者，只需使用WinSize作爲代碼，不需要2個變量，至少在您的示例中不需要......也許在您的其他代碼中需要。