Как создать плавные переходы между элементами массива изображений в Javascript Vanilla - не фоновое изображение - PullRequest
Новая
       50

Как создать плавные переходы между элементами массива изображений в Javascript Vanilla - не фоновое изображение

0 голосов
/ 27 ноября 2018

Я недавно играл с некоторым Javascript - и я пытался создать небольшое слайд-шоу, используя только Vanilla Javascript без библиотек, таких как jQuery - фактически в этом небольшом проекте я хочу узнать, как использовать и реализовать его на реальном веб-сайте,

Вот моя HTML-разметка: 

<body onload="changeImage()">
    <div class="logo">
        <img src="logo.png" class="logo_image" id="imageholder"/>
    </div>

Моя идея состояла в том, чтобы использовать HTML-контейнер div с тегом img - в каждой итерации в программе Javascript изображение будет исчезать, изменять егоисточник, а затем он исчезнет с новым изображением - и так далее.На данный момент я создал ужасное решение, которое объединяет эту идею: 

function changeImage()
{
    var imgArray = new Array();
    imgArray[0] = "logo.png";
    imgArray[1] = "logo2.png";
    imgArray[2] = "logo3.png";
    imgArray[3] = "logo4.png";
    imgArray[4] = "logo5.png";
    var i = 0;

    var container = document.getElementById("imageholder");
    setInterval(() => {

        if(i == 5)
        {
            i = 0;
        }
        fadeout(container);
        container.src = imgArray[i];
        fadein(container);
        i++;
    }, 2500)
}

function fadeout(container)
{
    var op = 1;

    var timer = setInterval(() => {
        if (op <= 0.0)
        {
            clearInterval(timer);
        }
        container.style.opacity = op;
        op -=0.1;
    }, 1);
}

function fadein(container)
{
    var op = 0.0;

    var timer = setInterval(() => {
        if (op >= 1)
        {
            clearInterval(timer)
        }
        container.style.opacity = op;
        op += 0.1;
    }, 100)
}

Вместо того, чтобы делать это бегло, мое слайд-шоу сначала мигает с новым изображением, а затем исчезает вместе с ним.Я знаю, что мне следует оптимизировать его, но как?

Я знаю, что есть намного лучшие решения, но до сих пор мне не удавалось найти подходящее решение для моей идеи.

1 Ответ

0 голосов
/ 27 ноября 2018

Я думаю, что одним из возможных решений является использование CSS-переходов со свойством opacity.Затем используйте JavaScript для добавления / удаления соответствующего класса CSS. 

//get all the imgs in the "slide" div and change to an array of img objects
var slide = document.getElementById("slide");
var arr = Array.prototype.slice.call(slide.children);

//initialize css
arr.map(function(imgObj) {
  imgObj.classList.add("slide-img");
});

//showing the first slide
arr[0].classList.add("show");

//initializing values
var currentSlide = 1;
var slideLength = slide.children.length;
var prevSlide = 0;

//interval function
setInterval(function() {
  if (currentSlide >= slideLength)
    currentSlide = 0;

  arr[prevSlide].classList.remove("show");
  arr[currentSlide].classList.add("show");

  prevSlide = currentSlide;
  currentSlide++;

}, 5000)
#slide img {
  position: absolute;
}

.slide-img {
  opacity: 0;
  transition: opacity 2s;
}

.show {
  opacity: 1;
}
<div id="slide">
  <img src="https://via.placeholder.com/468x160?text=img1" />
  <img src="https://via.placeholder.com/468x160?text=img2" />
  <img src="https://via.placeholder.com/468x160?text=img3" />
</div>
...