时间戳

首页 > 解决方案 > 如何从不断变化的幻灯片中删除闪光灯？

javascript - 如何从不断变化的幻灯片中删除闪光灯？

问题描述

我有这个网站https://acanhs.org/，但是当幻灯片切换到另一张图片时，它会显示白色闪光。我怎样才能删除它？

我的html：

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, 5000);
}
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mySlides {
  display: none
}

.mySlides {
  height: 100%;
  min-height: 600px;
  max-width: 100%;
  background-image: var(--background-image);
  background-size: cover;
  background-position: center;
}

.mySlides>.numbertext {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0.5rem;
}

.w3-animate-top {
  position: relative;
  animation: animatetop 0.4s
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

.w3-animate-bottom {
  position: relative;
  animation: animatebottom 0.4s
}

@keyframes animatebottom {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

.responsive {
  width: 100%;
  height: auto;
}
<div class="container image">

  <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/81463156_472179973704673_8295529433598935850_n(1).jpg')">
  </div>

  <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/097f1e08-ebfe-434a-bc68-8020d02cee6e.JPG')">
  </div>

  <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/8291878a-b5ad-4003-8cc6-de7baafd84a0.JPG')">
  </div>

  <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/27890996_211176766129569_6923967286697000960_n.jpg')">
  </div>

  <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/42914143_364663130939605_1259772328364992140_n.jpg')">
  </div>

  <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/42947322_373232869884042_7326776160519321694_n.jpg')">
  </div>

  <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/44689929_944494762409958_8911408401400786089_n.jpg')">
  </div>

  <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/fd2b6c09-19b7-42ad-b7fb-bce6dc983690.JPG')">
  </div>

  <div class="mySlides w3-animate-top responsive" style="--background-image: url('homepagepictures/IMG_6922.jpg')">
  </div>

  <div class="mySlides w3-animate-bottom responsive" style="--background-image: url('homepagepictures/IMG_6932.jpg')">
  </div>


</div>
<br>
<br>
<script src="slideshow.js"></script>

我的问题是如何从幻灯片中删除白色闪光

标签： javascripthtmlcss

解决方案

您好，您可以从 1 而不是从 0 开始关键帧不透明度吗？然后它可能没有从不透明度 0 到 1 的过渡进度，这在过渡期间显示了闪光的东西。所以这里是更新的动画风格。

.container{
    background-color:black;
  }
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:1} to{top:0;opacity:1}}

.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:1} to{bottom:0;opacity:1}}

推荐阅读