Question

因此，我有一张幻灯片，其中包含我不希望在像素宽度小于1080px的设备上显示的图片。有时会这么做。

这是网站：https://82729.ict-lab.nl/SnakesAreFish/index.html（关于“屏幕截图”部分）

JSONArray yourJsonArray = JSONArray.fromObject(yourJson);

我希望当您从宽屏调整为1080px或更小尺寸时，该功能可以激活，但是幻灯片不会消失。但是当您在1080px屏幕上刷新或访问该网站时，它们确实会消失。

Answer 1

删除showSlides的重新声明，就可以了

function showSlides() {
    if (window.innerWidth < 1080) return;

    let slideIndex = 0;
    const slides = document.getElementsByClassName("mySlides");

    for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
    }
    slideIndex++; 

    if (slideIndex > slides.length) {
        slideIndex = 1;
    }

    slides[slideIndex-1].style.display = "block";  
        setTimeout(showSlides, 8000);
    }
}
...

Answer 2

在其中添加逻辑，以在大小更改为阈值以下时终止间隔。

var updateShow = (function () {

  var slideshowTimer = null
  var slideIndex = -1
  
  return function () {
  
     var slides = document.getElementsByClassName("mySlides");
     if(!slides.length) return

    // If width is greater and not running, start it
    if (window.innerWidth > 10/*1080*/) {
      if (!slideshowTimer) {
        slideshowTimer = window.setInterval(executeIt, 1000)
      }
    } else {
      window.clearInterval(slideshowTimer)
      slideshowTimer = null
    }

    function executeIt() {
      if (slideIndex!==-1) {
         slides[slideIndex].style.display = "none";
      }
      slideIndex++
      if (slideIndex >= slides.length) {
        slideIndex = 0
      }
      slides[slideIndex].style.display = "block";
    }
  }
})();

window.addEventListener('DOMContentLoaded', function() {
  updateShow();
});

window.addEventListener('resize', function() {
  updateShow();
});

.mySlides {
  display: none;
}

<img src="http://placekitten.com/g/100/300" class="mySlides" />
<img src="http://placekitten.com/g/200/300" class="mySlides" />
<img src="http://placekitten.com/g/300/300" class="mySlides" />
<img src="http://placekitten.com/g/400/300" class="mySlides" />

激活窗口大小调整功能

2 个答案: