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>
};
