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个变量，至少在您的示例中不需要......也许在您的其他代码中需要。