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不被設置，一遍又一遍，並保持射擊調整大小的每個像素。

我也通常會增加延遲，大約一秒鐘停止調整大小後重繪。因爲當你調整窗口大小時，它會一遍又一遍地開火。