JavaScript SlideShow - эффект затенения - PullRequest
Новая
       21

JavaScript SlideShow - эффект затенения

0 голосов
/ 23 октября 2019

У меня есть JavaScript SlideShow, и я хочу убрать эффект «flash» при смене изображения и вместо этого добавить эффект затенения. Я нашел много решений, но ничего не работает, я не знаю почему :-( ...

Я вставил свой код здесь: http://jsfiddle.net/nanoupi42/xu06jdb2/1/

HTML: 

<div class="slideshow-container hidden__M__Device">

        <div class="mySlides fades">

          <img src="http://images7.alphacoders.com/338/338687.jpg" class="img-fluid" alt="">

        </div>

        <div class="mySlides fades">

          <img src="https://www.usine-digitale.fr/mediatheque/9/3/5/000729539/viveport-infinity.jpg" class="img-fluid" alt="">

        </div>

        <div class="mySlides fades">

          <img src="https://www.philosophytalk.org/sites/default/files/o-INFINITY-facebook.jpg" class="img-fluid" alt="">

        </div>

      </div>

      <div class="dots_container hidden__M__Device">

        <span class="dot" onclick="currentSlide(1)"></span>

        <span class="dot" onclick="currentSlide(2)"></span>

        <span class="dot" onclick="currentSlide(3)"></span>

      </div>

CSS: 

.slideshow-container {
  max-width: 100%;
  width: 100%;
  position: absolute;
  height: 1082px;
  z-index: -1;
}

.mySlides{
  display: none;
}

.mySlides > img {
  background-repeat: no-repeat;
  width: 100%;
  position: relative;
  z-index: -1;
  /* top:-154px; */
}

.dots_container{
  position: absolute;
  margin-top: 230px;
  display: flex;
  flex-direction: column;
  margin-left: 81.5%;
}

.dot {
  position: relative;
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
  margin-top: 5px;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: rgba(255,255,255,0.5);
}

.fades {
  -webkit-animation-name: fades;
  -webkit-animation-duration: 1.5s;
  animation-name: fades;
  animation-duration: 1.5s;
}

@-webkit-keyframes fades {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fades {
  from {opacity: .4}
  to {opacity: 1}
}

JavaScript: 

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
setInterval(plusSlides, 2000, 1); // call plusSlider, with 1 as parameter

Как вы можете видеть, при смене изображения возникает своего рода эффект «вспышки». Я хочу удалить егои добавьте эффект кроссфейдера вот так https://cobwwweb.com/simple-looping-crossfade-image-slideshow. У вас есть идея, как мне это сделать?

Большое спасибо.

Nanou

1 Ответ

0 голосов
/ 23 октября 2019

Проверьте анимацию CSS на классе fades. Ключевые кадры работают с opacity, вы можете изменить их на работу с translateX для свойства transform. 

@keyframes fades {
  from {transform: translateX(-100%)}
  to {transform: translateX(0%)}
}

Если вам нужна помощь с анимацией, есть animate.css или всю документацию о свойствах анимации CSS.

...