Question

可能引起关注的人：

我使用了W3schools.com教程中的代码来创建自动图像幻灯片。幻灯片放映在桌面尺寸上非常有用，但是，当更改为移动屏幕尺寸时，我无法相应地缩小幻灯片尺寸。

我可以使用所有其他图像，因为我能胜任HTML / CSS，但这让我很难过。不确定它是否是＆＃39; link rel＆＃39;与W3schools，javascript或其他我想念的东西有关。感谢您的帮助。代码如下：

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

圣诞节奇迹发生了。现在它正在运作！

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

1 个答案: