Как добавить изображение в слайд-шоу .js - PullRequest
Новая
       35

Как добавить изображение в слайд-шоу .js

0 голосов
/ 21 сентября 2018

Итак, это мой слайд-шоу div: 

<div class="header">
    <img name="slide" class="slide">
</div>

CSS для него: 

.slide{
    width: 80%;
    height: auto;
    filter: brightness(90%);
}

и JavaScript: 

var i = 0;
var images = [];
var time = 4000;


images[0] = '1.png';
images[1] = '2.png';
images[2] = '3.png';

function changeImg() {
  document.slide.src = images[i];

  if (i < images.length -1) {
    i++;

  }
  else
  {
    i = 0;
  }


  setTimeout("changeImg()", time);

}

window.onload = changeImg;

Теперь я хочу эток плавному затуханию, в настоящее время это просто резкое переключение изображений, но я хочу, чтобы он был плавным.Любая помощь?

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Хотя мне нравится ответ Джо, вот тот, который использует JavaScript без добавления или удаления классов:

Я дал <img> идентификатор для простоты использования здесь: 

<img id='slideShow' name="slide" class="slide">

JavaScript: 

function fadeImg(elem, total, step, speed){ 
    step=step||5;
    speed=speed||50;
    var iter=0;
    var fadeOutTime=(100/step)*speed;
    var time=total;
    var n = 0;
    var opacity;
    elem.src=images[n];
    var fadeInterval=setInterval(function(){
        time=time-speed;
        opacity=iter/100;
        if(time>fadeOutTime&&opacity<1){
            iter=iter+step;
        } else if(time<=fadeOutTime&&time>0&&opacity>0){
            iter=iter-step;
        } else if(time<=0){
            n<images.length-1?n++:n=0;
            elem.src=images[n];
            time=total;
        }
        elem.style.opacity=opacity;
        elem.style.filter= 'alpha(opacity=' +opacity*100 + ')';
    },speed);
}

window.onload = fadeImg(document.getElementById('slideShow'),time);

Я позаимствовал понятие интервала отсюда: https://stackoverflow.com/a/2207751/6661052

0 голосов
/ 21 сентября 2018

Вам нужно добавить непрозрачность, равную 0, в вашем классе css, а затем создать новый класс с непрозрачностью, равной 1, и тогда вы активируете функцию переключения непрозрачности после истечения определенного периода времени 

<style>
    .slide {
        border: none; 
        opacity: 0; 
        position: absolute; 
        top: 0; 
        left: 0;
        -webkit-transition: opacity 2s linear;
        -moz-transition: opacity 2s linear;
        -o-transition: opacity 2s linear;
        transition: opacity 2s linear;
    }
    .visible {
        opacity: 1;
    }
</style>

<div class="header">
    <img id="img0" class="slide visible" src="1.png">
    <img id="img1" class="slide" src="2.png">
    <img id="img2" class="slide" src="3.png">
</div>

<script>
    var actual = 0;
    var total = 3;

    function addClass(elem, name) {
        elem.className = elem.className + " " + name;
    }

    function deleteClass(elem, name) {
        var c = elem.className;
        elem.className = c.replace(name, "").replace(/   /g, " ").replace(/^ | $/g, "");
    }

    function nextImg() {
        var e;

        e = document.getElementById("img" + actual);
        deleteClass(e, "visible");

        actual++;
        if (actual > total - 1) actual = 0;

        e = document.getElementById("img" + actual);
        addClass(e, "visible");
    }

    var slider = setInterval(nextImg, 4000);
</script>
...