Question

所以我试图完成一个工作滑块（轮播）之间的交换，该滑块显示在大于715px的任何东西上。在715px下，将显示SVG文件而不是滑块。

我可以设置图像显示在＆lt; 715px，滑块在＆gt; 715px，但是我无法在调整浏览器窗口大小时让它们在一个和另一个之间交换。

我需要一个事件监听器吗？谢谢。

$(function() {
  var mobileIMG = 'img/BSW-mobile.svg' 

  // checks if window is less than 715px, if so, displays mobileIMG
  if (window.matchMedia("(max-width: 715px)").matches) {
    $('#slideshow').attr('src', mobileIMG);
  } else { // otherwise, runs carousel
    var imgs = ['img/slide1.jpg', 'img/slide2.jpg', 'img/slide3.jpg'];
    var i = 1;

    function changeSlide() {
        console.log('hello world');
        $('#slideshow').attr('src', imgs[i]);
        i++;
        if (i === 3) { i = 0; }
    }
  setInterval(changeSlide, 3000);
  }
});

Answer 1

为window resize事件添加事件侦听器。当发生这种情况时，此功能需要再次运行。

之后你需要做更多的工作，比如确保你的setInterval不会被反复设置并继续触发调整大小的每个像素。

我通常还会在调整大小停止后添加大约一秒的延迟以仅重绘。因为当你调整窗口大小时它会一遍又一遍地重复。

使用事件侦听器的JavaScript媒体查询

1 个答案: