Javascript jQuery窗口大小调整 $（文档）.ready（函数（）{ WinSize=$（window.width（）； var currentPosition=0； var slideWidth=WinSize； $（函数（）{ $（窗口）。调整大小（函数（）{ slideWidth=WinSize=$（窗口）.width（）； }); }); 变量幻灯片=$（'.slide'）； var numberOfSlides=slides.length； //删除JS中的滚动条 $（'slidecontainer'）.css（'overflow'，'hidden'）； //用#slideInner div包装所有幻灯片 幻灯片 .wrapAll（“”） //向左浮动以水平显示，重新调整。滑动宽度 .css({ ‘float’：‘left’， “宽度”：滑动宽度 }); //将#幻灯片内部宽度设置为所有幻灯片的总宽度 $（'slideInner'）.css（'width'，slideWidth*numberOfSlides）； //在DOM中插入控件 $（“#PageBG”） .prepend（“”） .附加（“”）； //第一次加载时隐藏左箭头控件 管理控制（当前职位）； //为控件创建事件侦听器。单击 $（“.control”） .bind（'单击'，函数（））{ //确定新位置 currentPosition=（$（this）.attr（'id'）='next'）？currentPosition+1:currentPosition-1； //隐藏/显示控件 管理控制（当前职位）； //使用边距向左移动滑块 $（'slideInner'）。设置动画({ “marginLeft”：滑动方向*（-currentPosition） }，800，‘线性’； }); $（'.SlideSelect'） .bind（'单击'，函数（））{ //使用边距向左移动滑块 $（'slideInner'）。设置动画({ “marginLeft”：slideWidth*（$（this.attr（'id'）） }，800，‘线性’；

}))

我希望slideWidth根据窗口大小进行更改，以便在调整窗口大小时，slideWidth会更改，但我似乎无法使其正常工作

---

有人知道为什么吗？

它不会更新其他变量，

slideWidth

是一个不同的、不同的变量，是

WinSize

中值的副本。无论何时初始设置，您都需要在函数中使用类似的内容来更新这两个变量：

$(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

变量，而不是创建全局变量。或者，对于您的代码，只需使用

WinSize

，就不需要两个变量，至少在您的示例中不需要了……您的代码的其余部分可能需要这个变量。

对不起，您能解释一下吗我不太喜欢sure@Brob-哪一部分？除非您需要另一个变量，否则最好只在代码中使用

WinSize

，可能不需要未更新的额外变量。

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