时间戳

首页 > 解决方案 > 如何在 Ionic 中构建此幻灯片

angular - 如何在 Ionic 中构建此幻灯片

问题描述

我在将 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>

标签： angulartypescriptionic-frameworkionic4

解决方案

利用

//将#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

//将所有图像置为空 //将显示块置为仅幻灯片索引

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

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

一次只显示 1 张图片

推荐阅读