javascript - 调整窗口大小时重新调整大小的 Javascript/Jquery 旋转图像

Question

我无法让它工作，请帮助！. 一团糟。我想要做的是，让这个图像在几秒钟内模糊并模糊一个新的，如果窗口大小大于定义的大小，它将使用更大的图像。它还需要检查窗口是否已重新调整大小，以便我可以随时更改图像。所以我需要这样的东西：

$(window).resize(function(){
change size
});

这是我遇到麻烦的主要代码：

$(document).ready(function() {

var index = 1;

function rotateImage()
{
  $('.dp1').fadeOut('slow', function()
  {
if($(window).width() > 1312 ) {
    $('.dp1').css({'background-image' : 'url(../img/display_banner' + index + '.jpg)'});
}
else {
    $('.dp1').css({'background-image' : 'url(../img/display_banner' + index + '_big.jpg)'});    
}

    $(this).fadeIn('slow', function()
    {
      if (index == images.length-1)
      {
        index = 0;
      }
      else
      {
        index++;
      }
    });
  });
}

$(document).ready(function()
{
  setInterval (rotateImage, 4000);
});
});

Answer 1

首先，您只需要一种.ready()方法。:)

为了解决您的问题，您可以利用.resize()计算窗口宽度。只需从包含宽度的变量开始，然后在调整大小时重新计算。例如：

$(document).ready(function () {
  var index = 1,
      width = $(window).width(); // SET THE WIDTH ON DOCUMENT READY

  function rotateImage () {
    //...
    if(width > 1312){ // USE THE "width" variable here in this comparison
    //...
  }

  //SET THE "width" variable on window resize
  $(window).resize(function(){
    width = $(this).width();
    //... RESIZE OR CHANGE OUT IMAGES HERE...
  });
});