Javascript/Jquery旋转图像，当窗口大小调整时重新调整大小

Javascript/Jquery rotating image that re-sizes when window is resized

本文关键字：调整 新调整 Javascript 旋转 Jquery 图像 窗口大小      更新时间：2023-09-26

我不能让这个工作，请帮助!． 真是一团糟。我要做的是，让这个图像模糊出来，在几秒钟内模糊一个新的图像，如果窗口大小大于定义的大小，它将使用一个更大的图像。此外，它需要检查窗口是否已重新调整大小，以便我可以随时更改图像。所以我需要这样写:

$(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);
});
});

首先，只需要一个.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...
  });
});
相关文章：