JS Ползунок исчезает изображения вместо простого изменения - PullRequest
Новая
       73

JS Ползунок исчезает изображения вместо простого изменения

1 голос
/ 02 мая 2020

У меня есть очень простой слайдер изображений, так как я изо всех сил пытался найти его без дополнительного хаоса ... Этот отзывчивый и работает нормально, загрузка изображений из-за изображений занимает немного времени, но это не так важно. В данный момент изображения просто переключаются каждый раз, однако я пытаюсь заставить их исчезать между изображениями? Если у кого-то есть какая-либо помощь, которая была бы идеальной, и, пожалуйста, держите ее прямо, так как я над головой, я работаю в основном с basi c HTML и PHP.

Вот что У меня есть: 

.slides {
  width: 100%;
}

.slides-hidden {
  display: none;
}
<script>
  addEventListener("load", () => { // "load" is safe but "DOMContentLoaded" starts earlier
    var index = 0;
    const slides = document.querySelectorAll(".slides");
    const classHide = "slides-hidden",
      count = slides.length;
    nextSlide();

    function nextSlide() {
      slides[(index++) % count].classList.add(classHide);
      slides[index % count].classList.remove(classHide);
      setTimeout(nextSlide, 8000);
    }
  });
</script>




<section>
  <img class="slides slides-hidden" src="indexslider/1.png" alt="1">
  <img class="slides slides-hidden" src="indexslider/2.png" alt="2">
  <img class="slides slides-hidden" src="indexslider/3.png" alt="3">
  <img class="slides slides-hidden" src="indexslider/4.png" alt="4">
  <img class="slides slides-hidden" src="indexslider/5.png" alt="5">
</section>

1 Ответ

0 голосов
/ 03 мая 2020

Этот скрипт не сильно отличается от того, что у вас есть, и достаточно прост. Чтобы добиться исчезновения, я добавил класс с непрозрачностью 0 (и установил текущую непрозрачность на 1). Непрозрачность изменяется с переходом css (с классом затухания, добавляемым в javascript).

Я настроил изображения как массив в javscript (зависит от того, работает ли это для вашего кода, зависит на сколько изображений у вас есть, но я догадался, так как это простой пример, вы использовали только несколько). Для демонстрации я использовал изображения-заполнители разных размеров.

Как видите, javascript довольно короткий и простой; проходит через массив и отображает каждое изображение в течение 3 секунд. (8 секунд для демонстрационных целей!)

Надеюсь, вы найдете это полезным. 

var myImages = [
    'http://placehold.it/300x200',
    'http://placehold.it/300x150',
    'http://placehold.it/400x250'
  ],
  curIndex = 0;
imgShow = 3000; /*yours is 8 secs, but for demo purposes, 3 secs is shorter!*/

function playSlides() {
  document.getElementById('slider').className += "fadeOut";
  setTimeout(function() {
    document.getElementById('slider').src = myImages[curIndex];
    document.getElementById('slider').className = "";
  }, 1000);
  curIndex++;
  if (curIndex == myImages.length) {
    curIndex = 0;
  }
  setTimeout(playSlides, imgShow);
}
playSlides();
#slider {
  opacity: 1;
  transition: opacity 1s;
}

#slider.fadeOut {
  opacity: 0;
}
<img id="slider" src="http://placehold.it/200x200">
...