Question

我希望使用简单的html和javascript进行幻灯片显示。我在下面写了我的代码。使用style属性隐藏和显示图像时出错。我在打字稿（离子）中使用了此代码。两行在代码“ x [i] .style.display”中具有样式属性的行都出错。请告诉我如何使用样式

HTML代码是-

<div class="w3-content w3-display-container">

    <div class="w3-display-container mySlides">
      <img src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
      <div class="w3-display-bottomleft w3-large w3-container w3-padding-16 w3-black">
        French Alps
      </div>
    </div>

    <div class="w3-display-container mySlides">
      <img src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">
      <div class="w3-display-bottomright w3-large w3-container w3-padding-16 w3-black">
        Northern Lights
      </div>
    </div>
  </div>

  <button class="w3-button w3-display-left w3-black" onclick="plusDivs(-1)">&#10094;</button>
<button class="w3-button w3-display-right w3-black" onclick="plusDivs(1)">&#10095;</button>

打字稿代码-

constructor(public navCtrl: NavController)
{
    var slideIndex = 1;
        showDivs(slideIndex);

        function plusDivs(n) {
          showDivs(slideIndex += n);
        }

        function showDivs(n) {
          var i;
          var x = document.getElementsByClassName("mySlides");
          console.log(x);
          if (n > x.length) {slideIndex = 1}
          if (n < 1) {slideIndex = x.length}
           for (i = 0; i < x.length; i++) {
             x[i].style.display = "none";  
           }
           x[slideIndex-1].style.display = "block";  
        }
}

Answer 1

您在页面加载之前调用脚本。从脚本中删除showDivs（slideIndex）调用，并在onload中调用它：

<body onload="showDivs(1)">

Answer 2

您可以在TypeScript中使用HTMLDivElement。例如；

var container: HTMLDivElement;
container.style.color = "red";

如何在Typescript

2 个答案: