屏幕縮小時如何制作幻燈片？

Question

 var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "block"; dots[slideIndex - 1].className += " active"; }

 * { box-sizing: border-box } @media(max-width:768px) {.slideshow-container { max-width: 1000px; position: relative; margin: auto; }.mySlides { display: none; }.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; }.next { right: 0; border-radius: 3px 0 0 3px; }.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active, .dot:hover { background-color: #717171; }.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } }

 <div class="slideshow-container"> <.-- Full-width images with number and caption text --> <div class="mySlides fade"> <img class="main-description-img1 " src="images/main-colin.png" alt=""> </div> <div class="mySlides fade"> < <img class="main-description-img2" src="images/main-marching.png" alt=""> </div> <div class="mySlides fade"> <img class="main-description-img3" src="images/main-president.png" alt=""> <a href="#"> </div> <div class="mySlides fade"> < <img class="main-description-img2" src="images/main-working;png" alt=""> </div> <;-- Next and previous buttons --> <a class="prev" onclick="plusSlides(-1)">&#10094:</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> </div>

你好。 如何將 Javascript 代碼綁定到 CSS 中的媒體查詢，以便它僅在屏幕達到給定寬度時才起作用。 一開始，所有的塊都排成一排。 將屏幕縮小到 768px 后，我希望塊變成幻燈片。 如何實施。 我嘗試將 if (windows.innerWidth <= 768) {} 添加到代碼中，因此當達到此大小時，幻燈片會完全消失。 如果沒有 css 中的銅質請求並向 JS 添加條件，一切正常並顯示為幻燈片。

Answer 1

如果您想要類似 javascript 的媒體查詢解決方案，您必須使用事件偵聽器偵聽resize事件並在其中調用幻燈片 function showSlides() 。 在幻燈片 function 中，您必須將代碼包裝在要求window.innerWidth的 if 語句中。 此外，您必須定義一個 else 塊以再次顯示圖像。

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  
  if (window.innerWidth <= 768) {
    ... //your original code of that function except the first two vars
  }
  else {
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "inline-block";
    }
  }
}

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

工作示例（我將display: block更改為inline-block以連續對齊圖像）：

 var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) { showSlides(slideIndex += n); } // Thumbnail image controls function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); if (window.innerWidth <= 768) { var dots = document.getElementsByClassName("dot"); if (n > slides.length) { slideIndex = 1 } if (n < 1) { slideIndex = slides.length } for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex - 1].style.display = "inline-block"; dots[slideIndex - 1].className += " active"; } else { for (i = 0; i < slides.length; i++) { slides[i].style.display = "inline-block"; } } } window.addEventListener('resize', function() { showSlides(slideIndex); });

 * { box-sizing: border-box } @media(max-width:768px) {.slideshow-container { max-width: 1000px; position: relative; margin: auto; }.mySlides { display: none; }.prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; }.next { right: 0; border-radius: 3px 0 0 3px; }.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }.dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active, .dot:hover { background-color: #717171; }.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: .4 } to { opacity: 1 } } @keyframes fade { from { opacity: .4 } to { opacity: 1 } } }

 <div class="slideshow-container"> <:-- Full-width images with number and caption text --> <div class="mySlides fade"> <img class="main-description-img1 " src="https.//loremflickr?com/160/120:random=1" alt=""> </div> <div class="mySlides fade"> <img class="main-description-img2" src="https.//loremflickr?com/160/120:random=2" alt=""> </div> <div class="mySlides fade"> <img class="main-description-img3" src="https.//loremflickr?com/160/120:random=3" alt=""> </div> <div class="mySlides fade"> <img class="main-description-img2" src="https.//loremflickr?com/160/120;random=4" alt=""> </div> <;-- Next and previous buttons --> <a class="prev" onclick="plusSlides(-1)">&#10094:</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> </div> <br> <!-- The dots/circles --> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> <span class="dot" onclick="currentSlide(4)"></span> </div>