Всем привет!
Делаю карусельку для сайта. Использую только чистый JS, т.к. прошел недавно книгу от HeadFirst "Учимся программировать на JavaScript" и хочу закрепить навыки, прежде чем изучать библиотеки.
Вот ссылка на песочницу:
1)Сделал через свойство transition(картинка перемещается не в течении 1,5сек, а сразу):
http://codepen.io/RRodionov/pen/VeYGgO/
2)Сделал через свойство left:
codepen.io/RRodionov/pen/GogwoOМоя карусель работает так:
1)Создаем обьект elemObj, который запоминает:
а)элемент, отображающийся сейчас
б)следующий элемент
в)предыдущий элемент
2)Удаляем все классы из элементов, хранящихся в объекте elemObj.
3)Проверяем, какая стрелка была нажата(левая или правая).
4)Добавляем классы к элементам.
Объект elemObj создается корректно, классы из элементов удаляются, стрелка проверяется, классы добавляются.
Раньше, вместо translate в css использовал left и все работало. Но переходы отображались рывками и соседние элементы подергивались.
Решил переделать на translate.
Текущая картинка сдвигается влево или вправо, в зависимости от нажатой стрелки.
А вот следующая картинка появляется на месте текущей сразу же, без анимации.
Есть 3 картинки:
<img class="carousel" style="display: block;" src="images/backgr(small)0.jpg" alt="bg">
<img class="carousel" style="display: none;" src="images/backgr(small)1.jpg" alt="bg">
<img class="carousel" style="display: none;" src="images/backgr(small)2.jpg" alt="bg">
Стили:
img.carousel {
z-index: 0;
width: 100%;
position: absolute;
left: 0;
top: 0px;
transition: 1.5s;
}
.carousel-left-animation {
transform: translate(-100vw);
}
.carousel-right-animation {
transform: translate(100vw);
}
.carousel-back-animation {
left: 100vw!important;
transform: translate(-100vw);
}
И JS:
var imgs = document.getElementsByClassName('carousel');
carousel(side, imgs);
/*Main function*/
function carousel(side, elem) {
/*Создает обьект elemObj, который запоминает
1)элемент, отображающийся сейчас
2)следующий элемент
3)предыдущий элемент
*/
var elemObj = checkCourse(elem, checkDisplayBlock);
/*Удаляет все классы из элементов, хранящихся в объекте elemObj */
resetAnimation(elemObj, 'carousel-left-animation', 'carousel-right-animation', 'carousel-back-animation');
/*Проверяет, какая стрелка была нажата(левая или правая). Запускает функцию carouselAnimation(), которая добавляет классы к элементам*/
checkSide(side, elemObj);
return;
}
/*Создает обьект elemObj*/
function checkCourse(elem, condition) {
for (var i = 0; i < elem.length; i++) {
if (condition(elem[i]) === true) {
var currentElem = elem[i];
var elemObj = {
currentElem: elem[i]
}
if (i >= (elem.length - 1)) {
elemObj.prevElem = elem[i - 1];
elemObj.nextElem = elem[0];
} else if (i <= 0) {
elemObj.prevElem = elem[2];
elemObj.nextElem = elem[i + 1];
} else {
elemObj.nextElem = elem[i + 1];
elemObj.prevElem = elem[i - 1];
}
return elemObj;
}
}
}
/*Check "display: block"*/
function checkDisplayBlock(elem) {
var elemDisplay = elem.style.display;
return elemDisplay === 'block';
}
/*Проверяет сторону*/
function checkSide(side, elemObj, obj) {
if (side == 'left') {
carouselAnimation(obj, elemObj, elemObj.nextElem, 'left', 'nextImg');
} else {
carouselAnimation(obj, elemObj, elemObj.prevElem, 'right', 'prevImg');
}
}
/*Добавляет класс*/
function carouselAnimation(obj, elemObj, courseElem, side, courseClass) {
elemObj.currentElem.classList.add('carousel-' + side + '-animation');
courseElem.style.display = 'block';
courseElem.classList.add('carousel-back-animation');
setTimeout(function(){elemObj.currentElem.style.display = 'none';}, 1500);
}
/*Удаляет классы*/
function resetAnimation(elemObj, class1, class2, class3, class4, class5) {
elemObj.currentElem.classList.remove(class1, class2, class3, class4, class5);
elemObj.nextElem.classList.remove(class1, class2, class3, class4, class5);
elemObj.prevElem.classList.remove(class1, class2, class3, class4, class5);
}
Простой
