Question

我已经用jquery创建了一个幻灯片库，但我遇到了一些关于不透明度的问题。

计时器启动时，滑块会以正确的方式工作，但是当达到不透明度的100％时，它将使第一张图像闪烁并在几秒钟内自动将不透明度设置为100％。

我已经附上了一个链接，可以带您到视频中，直接在网站上解释问题。

访问http://projectdesign.altervista.org/video/slider.mp4

/* slider */

let slideIndex = -1;
const SLIDE_NUMBER = 4;
let slide_timeout;
showSlides(1);

function showSlides(offset) {
  let slides = $(".slide").css("display", "none");
  let dots = $(".dot").removeClass("active");

  slideIndex = (slideIndex + offset) % SLIDE_NUMBER;

  $(slides.get(slideIndex)).css("display", "block");
  $(dots.get(slideIndex)).addClass("active");

  slide_timeout = setTimeout(showSlides.bind(null, 1), 5000);
}

$(".next").click(() => {
  clearTimeout(slide_timeout);
  showSlides(1);
});

$(".prev").click(() => {
  clearTimeout(slide_timeout);
  showSlides(-1);
});

/*SLIDER */

.container-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.dot {
  height: 3px;
  width: 20px;
  margin: 0 2px;
  background-color: white;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: orange;
}


/* Fading animation */

@-webkit-keyframes fade {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  85% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  85% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateY(0);
    opacity: 0;
  }
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  animation-name: fade;
  animation-duration: 5s;
}

.box-dot {
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- start slider -->
<div class="container-slider">

  <div class="slide fade">
    <img src="foto/1.jpg" class="img-sl" alt="">
  </div>

  <div class="slide fade">
    <img src="foto/2.jpg" class="img-sl" alt="">
  </div>

  <div class="slide fade">
    <img src="foto/3.jpg" class="img-sl" alt="">
  </div>

  <div class="slide fade">
    <img src="foto/4.jpg" class="img-sl" alt="">
  </div>

  <a class="prev"><i class="fas fa-angle-left"></i></a>
  <a class="next"><i class="fas fa-angle-right"></i></a>

  <div class="box-dot">
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</div>
<!-- end container slider -->

删除闪烁的图像。

Answer 1

我将添加“ animation-fill-mode：forwards”，以便动画在最后一帧结束。

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  animation-name: fade;
  animation-duration: 5s;
  animation-fill-mode:forwards
}

如何修复jQuery滑块库中的不透明度

1 个答案: