javascript - 图像在窗口调整大小时调整大小

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

这是因为它是一个不同的不同值，如果你想改变它你需要直接改变它，就像这样:

WinSize = $(window).width();
var slideWidth = WinSize;

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

或者直接使用 WinSize，无论您用它做什么，因为它已经更新了。