javascript - 无法从 W3schools.com 的移动浏览器自动幻灯片更改图像大小

Question

它可能与谁有关:

我使用了 W3schools.com 关于创建自动图像幻灯片的教程中的代码。幻灯片在桌面尺寸上效果很好，但是，当更改为移动屏幕尺寸时，我无法相应地缩小幻灯片尺寸。

我能够对所有其他图像执行此操作，因为我能胜任 HTML/CSS，但这让我感到难过。不确定它是否是与 W3schools、javascript 或我遗漏的其他内容相关的“链接 rel”。感谢您提供的所有帮助。代码如下:

HTML:

<div class="w3-content w3-section">
<img class="mySlides" src="slider_3.png">
<img class="mySlides" src="slider_2.png">
<img class="mySlides" src="slider_1.png">
<img class="mySlides" src="slider_4.png">
<img class="mySlides" src="slider_5.png">

CSS:

.mySlides {
  display: none;
  width: 960px;
  height: 350px;
}

/* For mobile phones: */
@media screen and (min-width: 300px) and (max-width: 900px) {

.mySlides {
  display: none;
  width: 100%;
  height: auto;
}

和Java:

    var myIndex = 0;
carousel();

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

Answer 1

圣诞奇迹发生了。现在它正在工作!