带有事件侦听器的JavaScript媒体查询

因此，我试图在一个工作滑块转盘之间实现交换，该转盘显示在任何大于715px的屏幕上。在715px下，将显示SVG文件而不是滑块

我可以设法使图像显示为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);
  }
});

---

为窗口调整大小事件添加事件侦听器。当这种情况发生时，这个函数需要再次运行

在那之后，你需要做更多的工作，比如确保你的设置间隔不会被反复设置，并在调整大小的每个像素上持续触发

我还通常会添加大约一秒钟的延迟，以便在调整大小停止后仅重新绘制。因为当你调整窗口大小时，它会一次又一次地触发