JavaScript媒体查询与事件监听器

Question

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

我可以管理图像显示在< 715px，滑块大于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

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

你会需要做一些更多的工作之后，像确保你的setInterval不被设置，一遍又一遍，并保持射击调整大小的每个像素。

我也通常会增加延迟，大约一秒钟停止调整大小后重绘。因为当你调整窗口大小时，它会一遍又一遍地开火。