Question

我有幻灯片显示它有图像我希望滑块在大屏幕上的特定幻灯片上停止，我希望它能够在小屏幕上保持幻灯片显示，我该怎么做？这是我的javascript代码：

var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block"; 
    setTimeout(carousel, 2000); // Change image every 2 seconds
}

Answer 1

我过去曾使用过http://wicky.nillia.ms/enquire.js/，而且它对于视口宽度特定的JS效果很好。

如果你想要一些非常简单的东西，你可以在加载时检查document.body.offsetWidth并从那里运行自定义JS。

Answer 2

例如，limit width = 1000px

var slideIndex = 0;
    carousel();
    function carousel() {
     var i;
     var x = document.getElementsByClassName("mySlides");
     for (i = 0; i < x.length; i++) {
     x[i].style.display = "none"; 
     }
     slideIndex++;
     if (slideIndex > x.length) {slideIndex = 1} 
     var w = window.innerWidth;
     if(w < 1000){
       x[slideIndex-1].style.display = "block"; 
       setTimeout(carousel, 2000); // Change image every 2 seconds
     }
    }

参见示例：https://jsfiddle.net/kilotonna/n9j42q8x/1/

OR与侦听器调整大小：

var slideIndex = 0;
 var w = window.innerWidth;
carousel();
window.addEventListener('resize', function(){
 w = window.innerWidth;
}
);
function carousel() {
 var i;
 var x = document.getElementsByClassName("mySlides");
 for (i = 0; i < x.length; i++) {
 x[i].style.display = "none"; 
 }
 slideIndex++;
 if (slideIndex > x.length) {slideIndex = 1} 
 if(w < 700){
   x[slideIndex-1].style.display = "block"; 
   setTimeout(carousel, 2000); // Change image every 2 seconds
 }
}

https://jsfiddle.net/kilotonna/n9j42q8x/7/

停止特定幻灯片上的幻灯片演示

2 个答案: