Question

我在页面重新加载/刷新时使用拉斯维加斯幻灯片作为全宽度横幅图像并具有随机播放功能。

如何使用单个变量为桌面，平板电脑和移动设备设置三种不同尺寸的裁剪图像。？

以下是我的代码，我使用下面的代码实现了。但我同时调用函数，我想这不是一个很好的实践。任何人都建议我一个更好的解决方案。

// The Shuffle Function
  function shuffle(o) { 
    for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
  };  

  // Define backgrounds array
  var bgimages = [{
      src: "images/dbg1.jpg"
    },
    {
      src: "images/dbg2.jpg"
    },
    {
      src: "images/dbg3.jpg"
    },
  ]

  var tabimages = [{
      src: "images/tablet/tbg1.jpg"
    },
    {
      src: "images/tablet/tbg2.jpg"
    },
    {
      src: "images/tablet/tbg3.jpg"
    },
  ]

  var mobimages = [{
      src: "images/mobile/mbg1.jpg"
    },
    {
      src: "images/mobile/mbg2.jpg"
    },
    {
      src: "images/mobile/mbg3.jpg"
    },
  ]

  var windowWidth = $(window).width();
  if ($(window).width() >= 1024) {
   // Suffle the array
    randombgs = shuffle(bgimages);
    $("body").vegas({
      delay: 10000,
      cover: true,
      timer: false,
      slides: randombgs
    });   
  }

  if ($(window).width() >= 768) {
   // Suffle the array
    randomTbg = shuffle(tabimages);
    $("body").vegas({
      delay: 10000,
      cover: true,
      timer: false,
      slides: randomTbg
    });
  }

  if ($(window).width() <= 767) {
   // Suffle the array
    randomMbg = shuffle(mobimages);
    $("body").vegas({
      delay: 10000,
      cover: true,
      timer: false,
      slides: randomMbg
    });
  }

Answer 1

$(window).resize(function() {
  var windowWidth = $(window).width();
  if ($(window).width() >= 1024) {
    randombgs = shuffle(bgimages);
  } else if($(window).width() >= 768) {
    randomTbg = shuffle(tabimages);
  } else {
    randomMbg = shuffle(mobimages);
  }
  $("body").vegas({
    delay: 10000,
    cover: true,
    timer: false,
    slides: randombgs
  });   
})

使用jquery在移动平板电脑和桌面分辨率中显示不同尺寸的图像

1 个答案: