Как вывести фотографии из папки или из контейнера последовательно с отработкой на каждой анимации?

Question

[Юрий Машков]

html
Анимировать


Плавно увеличиваем фотографию
function myMove() {
var elem = document.querySelector("img");
var pos = 0; //Определяем начальную позицию
var id = setInterval(frame, 10); //в переменной id метод setInterval в кавычках функция frame 10 это величина хода за раз
function frame() {
if(pos == 800 ) { // если начальная позиция переместилась в конец очищаем функцию
clearInterval(id); //Остановка функции если позиция достигла 800
} else { // иначе следует увеличние от начальной позиции на 1 пиксель
pos++;
elem.style.width = pos + 'px';
elem.style.height = pos + 'px';
}
}
Растворяем фотографию
function fade(elem, t, f){
var elem = document.querySelector('img'); //находим элеметн для анимации
var fps = f || 50;
var time = t || 500; // время работы анимации (по умолчанию 500мс)
var steps = time / (1000 / fps); // сколько всего покажем кадров
var op = 1; // текущее значение opacity - изначально 0
var d0 = op / steps; // изменение прозрачности за 1 кадр
var timer = setInterval(function(){ // устанавливаем интервал (1000 / fps) наприм, 50fps -> 1000 / 50 = 20мс
op -= d0; // уменьшаем текущее значение opacity
elem.style.opacity = op; // устанавливаем opacity элементу DOM
steps--; // уменьшаем количество оставшихся шагов анимации
if(steps <= 0){ // если анимация окончена
clearInterval(timer); // убираем интервал выполнения
elem.style.display = 'none'; // и убираем элемент из потока документа
}
}, (1000 / fps));
}
setTimeout(fade, 12000); //вызываем функцию fade через 12 сек.

};
Вызываем фотографии из контейнера
var images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"];
var slider = document.querySelector("#myContainer");
var img = slider.querySelector('img');
var i = 1;
img.src = 'images/' + images[0];
window.setInterval(function() {
img.src = 'images/' + i + '.jpg';

i++;

if(i == images.length){
i = 1;
}

}, 1000);

Comments

[Ivan Ustûžanin]

код в соответствующий тег через </>

[Юрий Машков]

IvanU7n, А если немного расширить, мне пока трудно понять

[Ivan Ustûžanin]

Юрий Машков, код нечитаемый, его нужно оформить через соответствующую кнопку в редакторе

[Юрий Машков]

function myMove() {
    var elem = document.querySelector("img");     
    var pos = 0;                                                       //Определяем начальную позицию                                         
    var id = setInterval(frame, 10);                            //в переменной id метод setInterval в кавычках функция frame 10 это величина хода за раз
    function frame() {
        if(pos == 800 ) {                                         // если начальная позиция переместилась в конец очищаем функцию
            clearInterval(id);                                  //Остановка функции если позиция достигла 800
        } else {                                                      // иначе следует увеличние  от начальной позиции на 1 пиксель
            pos++;
            elem.style.width = pos + 'px';
            elem.style.height = pos + 'px';            
        }             
     }    
     function fade(elem, t, f){
        var elem = document.querySelector('img');           //находим элеметн для анимации
        var fps = f || 50;                                          
        var time = t || 500;                                // время работы анимации (по умолчанию 500мс)    
        var steps = time / (1000 / fps);                    // сколько всего покажем кадров    
        var op = 1;                                         // текущее значение opacity - изначально 0   
        var d0 = op / steps;                                // изменение прозрачности за 1 кадр     
        var timer = setInterval(function(){                  // устанавливаем интервал (1000 / fps) наприм, 50fps -> 1000 / 50 = 20мс       
        op -= d0;                                             // уменьшаем текущее значение opacity     
        elem.style.opacity = op;                              // устанавливаем opacity элементу DOM      
        steps--;                                              // уменьшаем количество оставшихся шагов анимации  
            if(steps <= 0){                                   // если анимация окончена        
                clearInterval(timer);                         // убираем интервал выполнения        
                elem.style.display = 'none';                  // и убираем элемент из потока документа
          }
            }, (1000 / fps));        
      }
     setTimeout(fade, 12000); //вызываем функцию  fade через 12 сек.
     
Перебираем в контейнере
var images = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg"];
    var slider = document.querySelector("#myContainer");
    var img = slider.querySelector('img');
    var i = 1;
    img.src = 'images/' + images[0];
    window.setInterval(function() {
        img.src = 'images/' + i + '.jpg';
       
           i++;
        
        if(i == images.length){
            i = 1; 
        }        
html
<button onclick="myMove()">Анимировать</button>
     <div id="myContainer">
    <img src="images/5.jpg"></div>
    
    };

Answer 1

[Михаил Лялин]

А не проще взять готовую галерею с переходами и т.п. уровня Fotorama и т.п.?!

Answer 2

[Юрий Машков]

Конечно проще, можно и подключить библиотеку, но задача стоит на чистом javascript.