如何在 Ionic 中构建此幻灯片答案

【问题标题】：How do I build this slideshow in Ionic如何在 Ionic 中构建此幻灯片
【发布时间】：2021-03-27 20:09:44
【问题描述】：

我在将 javascript/css 幻灯片传递到 ionic 时遇到问题。

Ionic 不支持元素中的“.style”。请帮忙，下面是代码

<head>
<title>Slideshow</title>
<style>
.slides {display:none;}
</style>
</head>

上面是隐藏所有媒体。下面是媒体展示和隐藏

<body>

<h2 class="center">Automatic Slideshow</h2>

<div class="content section" style="max-width:500px">
  <img class="slides" src="http://localhost/ads/dashboard/uploads/slides/336d5ebc5436534e61d16e63ddfca3272007281.jpg" style="width:100%">
  <img class="slides" src="http://localhost/ads/dashboard/uploads/slides/03c7c0ace395d80182db07ae2c30f0342007221.png" style="width:100%">
  <video class="slides" playsinline="playsinline" style="width:100%" autoplay muted webkit-playsinline preload="auto">
  <source src="http://localhost/ads/dashboard/uploads/slides/0d43283ccf9d9d6d3a213f5e742425032010261232321.mp4" type="video/mp4">
  </video>
  <video class="slides" playsinline="playsinline" style="width:100%" autoplay muted webkit-playsinline preload="auto">
  <source src="http://localhost/ads/dashboard/uploads/slides/838c0f8d4f2ea2a687935d8546d54c302010261232321.mp4" type="video/mp4">
  </video>
  <img class="slides" src="http://localhost/ads/dashboard/uploads/slides/8277e0910d750195b448797616e091ad2007281.png" style="width:100%">
</div>

以下是 10 秒后更改每个媒体的 javascript

<script>
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("slides");
  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, 10000); 
}
</script>

【问题讨论】：

试用：ionicframework.com/docs/api/slides

标签： angular typescript ionic-framework ionic4

【解决方案1】：

利用

//将#slides作为包含带有*ngfor的子div的包装类的id。

*ngFor="let img of images" 
var x = document.getElementsByClassName("slides");
for(i = 0; i < x.length; i++) {
x[i].style.display = "none";  
}

//第一次slideIndex必须为1

showDivs(slideIndex += n);
enter code here

//将所有图片置为null //将显示块放在仅幻灯片索引中

x[slideIndex - 1].style.display = "block";

//对于每个右箭头按钮单击右/左箭头按钮单击 //幻灯片将开始工作

一次只会显示一张图片

【讨论】：

我的问题是这个 x[i].style.display ionic 不允许 .style 我怎么能绕过它
让 floorElements = document.getElementsByClassName("slides") as HTMLCollectionOf; floorElements[0].style.display="none";