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个变量，至少在您的示例中没有...可能在其余代码中需要。

jQuery窗口调整大小

1 个答案: