Пятница, 11 Января 2013 11:17

Слайдер картинок на чистом JavaScript (без jQuery)

Written by 
Оцени эту запись
(26 Голоса)

В данной статье хочу предложить на ваш суд слайдер картинок на чистом JavaScript с реализацией аналога animate, разными эффектами смены картинок со случайным выбором. Javascript файл можно будет скачать и подключить. В HTML файле нужно будет просто вставить картинки. Поскольку слайдер реализован на чистом JavaScript, то вам не нужно будет дополнительно подключать библиотеку jQuery. В данной статье также будет подробно описана вся реализация.

 

 

Я сделала такой слайдер:

 

 

cat1 cat1 cat1 cat2 cat1 cat1 cat3 cat1 cat1 cat4 cat1 cat1 cat5 cat1 cat1 cat6 cat1 cat1 cat7 cat1 cat1

 

 

 

HTML код простой:

 

 

<div id="rotator">
            <img src="/images/cat1.jpg" alt="cat1 cat1 cat1">
            <img src="/images/cat2.jpg" alt="cat2 cat1 cat1">
            <img src="/images/cat3.jpg" alt="cat3 cat1 cat1">
            <img src="/images/img1.jpg" alt="cat4 cat1 cat1">
            <img src="/images/img2.jpg" alt="cat5 cat1 cat1">
            <img src="/images/img3.jpg" alt="cat6 cat1 cat1">
            <img src="/images/img4.jpg" alt="cat7 cat1 cat1">
            <img src="/images/img5.jpg" alt="cat8 cat1 cat1">
            <img src="/images/img6.jpg" alt="cat9 cat1 cat1">
            <img src="/images/img7.jpg" alt="cat10 cat1 cat1">
            <img src="/images/img8.jpg" alt="cat11 cat1 cat1">
            <img src="/images/img9.jpg" alt="cat12 cat1 cat1">
            <img src="/images/img10.jpg" alt="cat13 cat1 cat1">
</div>
 
Важно иметь идентификатор контейнера, содержащего картинки и сами картинки. Размер картинок не имеет значения, выводиться они будут по заданным размерам. При желании, вы сможете эти размеры изменять.
 
 
CSS стили:
 
Отсутствуют!))
 
 
JavaScript код:
 
 

Вы можете Скачать скрипт и подключить его отдельным файлом в теге <head> вашего документа:

 

<script type="text/javascript" src="/js/rotator.js"></script>

 
 
Или же просмотреть полный код:
 
 
 
function kateRotator(){
    var rotator, img_list = [], src_list =[], alt_list = [], width, height, i, j, k, p,
        inner, descript, array, array_col = [], arr_horiz, arr_vert, current, opacity ,func, alt_list_bg = [];
    width = 400;
    height = 300;
    arr_horiz = 10;
    arr_vert = 5;
    rotator = document.getElementById('rotator');
    rotator.style.width = width+'px';
    rotator.style.height = height+'px';
    rotator.style.position = 'relative';
    rotator.style.overflow = 'hidden';
    inner = document.createElement('div');
    inner.className = 'rotator-inner';
    inner.style.position = 'absolute';
    rotator.appendChild(inner);
    inner.style.width = width*rotator.getElementsByTagName('img').length + 'px';
    inner.style.height = height+'px';
    descript = document.createElement('div');
    descript.className = 'rotator-description';
    rotator.appendChild(descript);
    array = document.createElement('div');
    array.className = 'rotator-array';
    array.style.position = 'absolute';
    array.style.top = '0px';
    array.style.left = '0px';
    array.style.width = width+'px';
    array.style.height = height+'px';
    rotator.appendChild(array);
    current = 0;
    opacity = 1;
    p = 0;
    for (i = 0; i < rotator.getElementsByTagName('img').length; i++) {
        img_list[i] = document.createElement('div');
        img_list[i].className = 'rotator-img';
        inner.appendChild(img_list[i]);
        src_list[i] = rotator.getElementsByTagName('img')[i].getAttribute('src');
        img_list[i].style.background = 'url('+src_list[i]+')';
        alt_list[i] = document.createElement('div');
        alt_list[i].className = 'rotator-description-item';
        descript.appendChild(alt_list[i]);
        if (rotator.getElementsByTagName('img')[i].getAttribute('alt')) {
            alt_list[i].innerHTML = '<div>'+rotator.getElementsByTagName('img')[i].getAttribute('alt')+'</div>';
        }
        alt_list[i].style.zIndex = 5;
        img_list[i].style.width = width+'px';
        img_list[i].style.height = height+'px';
        alt_list_bg[i] = document.createElement('div');
        alt_list[i].appendChild(alt_list_bg[i]);
        alt_list[i].style.position = img_list[i].style.position = alt_list_bg[i].style.position = 'absolute';
        img_list[i].style.backgroundPosition = 'center center';
        img_list[i].style.backgroundRepeat = 'no-repeat';
        img_list[i].style.backgroundSize = '100% 100%';
        img_list[i].style.opacity = '0';
        img_list[i].style.zIndex = 2;
        alt_list[i].style.zIndex = alt_list_bg[i].style.zIndex = 5;
        alt_list[i].childNodes[0].style.zIndex = 99;
        alt_list[i].childNodes[0].style.position = 'relative';
        alt_list[i].style.width = '70%';
        alt_list[i].style.padding = '0 5%';
        alt_list[i].style.height = alt_list[i].style.lineHeight = '30px';
        alt_list_bg[i].style.top = 0+'px';
        alt_list[i].style.right = alt_list[i].style.bottom = 0+'px';
        alt_list_bg[i].style.right = -40+'px';
        alt_list_bg[i].style.width = alt_list_bg[i].style.height = '100%';
        alt_list_bg[i].style.background = '#335';
        alt_list_bg[i].style.opacity = '0.5';
        alt_list[i].style.color = '#fff';
        alt_list[i].style.fontFamily = 'Arial';
        alt_list[i].style.textAlign = 'right';
        alt_list[i].style.opacity = 0;
        alt_list_bg[i].style.webkitTransform = 'skew(-45deg)';
    }
    img_list[1].style.opacity = 1;
    alt_list[0].style.opacity = 1;
    //document.getElementById('rez').innerHTML = rotator.getElementsByTagName('img')[0].getAttribute('src');
    for (i = 0; i < 30*rotator.getElementsByTagName('img').length; i++) {
        document.getElementById('rez').innerHTML = rotator.getElementsByTagName('img')[0].getAttribute('src');
        rotator.removeChild(rotator.getElementsByTagName('img')[0]);
    }
    for (k = 0; k < arr_horiz; k++) {
        array_col[k] = document.createElement('div');
    }
    for (i = 0; i < arr_horiz; i++) {
        for (j = 0; j < arr_vert; j++) {
            array_col[j][i] = document.createElement('div');
            array.appendChild(array_col[j][i]);
            array_col[j][i].style.width = width/arr_horiz+'px';
            array_col[j][i] = document.createElement('div');
            array_col[j][i].className = "rotator-array-list";
            array.appendChild(array_col[j][i]);
            array_col[j][i].style.width = width/arr_horiz+'px';
            array_col[j][i].style.height = height/arr_vert+'px';
            array_col[j][i].style.position = 'absolute';
            array_col[j][i].style.top = array_col[j][i].offsetHeight*j+'px';
            array_col[j][i].style.left = array_col[j][i].offsetWidth*i+'px';
            array_col[j][i].style.backgroundPosition = (-array_col[j][i].offsetLeft)+'px '+(-array_col[j][i].offsetTop)+'px';
            array_col[j][i].style.backgroundImage = 'url('+src_list[current]+')';
            array_col[j][i].style.backgroundSize = (100*arr_horiz)+'% '+(100*arr_vert)+'%';
            array_col[j][i].style.zIndex = 4;
        }
    }
    var a = [], b = [], f;
    for (i = 0; i < arr_horiz; i++) {
        for (j = 0; j < arr_vert; j++) {
            a[i] = array_col[j][i].offsetLeft;
            b[j] = array_col[j][i].offsetTop;
        }
    }
    //document.getElementById('rez').innerHTML = b;
    func = 4;
    f = rotateOpacity;
    setTimeout(function(){
        setInterval(function () {
            for (i = 0; i < arr_horiz; i++) {
                for (j = 0; j < arr_vert; j++) {
                    array_col[j][i].style.left = a[i]+'px';
                    array_col[j][i].style.top = b[j]+'px';
                    array_col[j][i].style.opacity = 1;
                    array_col[j][i].style.width = width/arr_horiz+'px';
                    array_col[j][i].style.height = height/arr_vert+'px';
                    array_col[j][i].style.backgroundSize = (100*arr_horiz)+'% '+(100*arr_vert)+'%';
                }
            }
            f();
            p = p+1;
            if (p == 100) {
                func = Math.floor(Math.random()*7);
                if (func == 0) {
                    f = rotateHorizLines;
                } else if (func == 1) {
                    f = rotateVertLines;
                } else if (func == 2){
                    f = rotateOpacity;
                } else if (func == 3){
                    f = rotateDiagLines;
                } else if (func == 4){
                    f = rotateSize;
                } else if (func == 5){
                    f = rotateNoSameBottomSize;
                } else if (func == 6){
                    f = rotateNoSameTopSize;
                }
                p = 0;
                if (current < inner.childNodes.length-1) {
                    current = current+1;
                }
                else {
                    current = 0;
                }
                for (i = 0; i < arr_horiz; i++) {
                    for (j = 0; j < arr_vert; j++) {
                        array_col[j][i].style.backgroundImage = 'url('+src_list[current]+')';
                        array_col[j][i].style.opacity = 1;
                    }
                }
                setTimeout(function(){
                    for (i = 0; i < inner.childNodes.length; i++) {
                        img_list[i].style.opacity = 0;
                        alt_list[i].style.opacity = 0;
                    }
                    if (current < inner.childNodes.length-1) {
                        img_list[current+1].style.opacity = 1;
                        alt_list[current+1].style.opacity = 1;
                    }
                    else {
                        img_list[0].style.opacity = 1;
                        alt_list[0].style.opacity = 1;
                    }
                },100);
                opacity = 1;
            }
        }, 50);
    },5000);
    function rotateOpacity() {
        if (opacity > 0) {
            opacity = opacity-p*0.01;
        }
        else {
            opacity = 0;
        }
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if (j == 3 || j == 1) {
                    array_col[j][i].style.opacity = opacity-0.3;
                }
                else if (i == 2 || i == 4 || i == 6 || i == 8) {
                    array_col[j][i].style.opacity = opacity-0.3;
                } else {
                    array_col[j][i].style.opacity = opacity;
                }
            }
        }
    }
    function rotateHorizLines() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if(array_col[j][i].offsetLeft > -array_col[j][i].offsetWidth){
                    if (j == 3 || j == 1) {
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft-p*20)+'px';
                    }
                    else {
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft-p*15)+'px';
                    }
                    if (i == 9 || i == 7 || i == 5) {
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+10)+'px';
                    } else {
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft-10)+'px';
                    }
                }
            }
 
        }
    }
    function rotateVertLines() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if(array_col[j][i].offsetTop > -array_col[j][i].offsetHeight){
                    if (i == 0 ||i == 2 || i == 4 || i == 6 || i == 8) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop-p*15)+'px';
                    }
                    else {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop-p*20)+'px';
                    }
                }
                if (j == 0 || j == 2 || j == 4) {
                    array_col[j][i].style.top = (array_col[j][i].offsetTop+10)+'px';
                }
                else {
                    array_col[j][i].style.top = (array_col[j][i].offsetTop-10)+'px';
                }
            }
 
        }
 
    }
    function rotateDiagLines() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if(array_col[j][i].offsetTop > -array_col[j][i].offsetHeight){
                    if (j == 4 && i == 2 || j == 4 && i == 6 || j == 2 && i == 0) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*10)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*10)+'px';
                    } else if (j == 2 && i == 0 || j == 5 && i == 4 || j == 5 && i == 3) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*12)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*12)+'px';
                    } else if (j == 1 && i == 3 || j == 1 && i == 1 || j == 0 && i == 5) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*15)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*15)+'px';
                    } else if (j == 0 && i == 2 || j == 3 && i == 2 || j == 0 && i == 6) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*17)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*17)+'px';
                    } else if (j == 0 && i == 0 || j == 4 && i == 3 || j == 2 && i == 3) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*18)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*18)+'px';
                    }
                    else {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*19)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*19)+'px';
                    }
                }
            }
 
        }
 
    }
    function rotateSize() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if (p < 60) {
                    array_col[j][i].style.width = (array_col[j][i].offsetWidth-p*((width*arr_vert)/(height*arr_horiz)))+'px';
                    array_col[j][i].style.height = (array_col[j][i].offsetHeight-p)+'px';
                    array_col[j][i].style.backgroundSize = ((100*width)/array_col[j][i].offsetWidth)+'% '+((100*height)/array_col[j][i].offsetHeight)+'%';
                }
                else {
                    array_col[j][i].style.left = (-width)+'px';
                    array_col[j][i].style.top = (-height)+'px';
                }
 
            }
        }
    }
    function rotateNoSameBottomSize() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if (p < 60 && i <= (arr_horiz-p) && j <= (arr_vert-p)) {
                    array_col[j][i].style.width = (array_col[j][i].offsetWidth-p*((width*arr_vert)/(height*arr_horiz)))+'px';
                    array_col[j][i].style.height = (array_col[j][i].offsetHeight-p)+'px';
                    array_col[j][i].style.backgroundSize = ((100*width)/array_col[j][i].offsetWidth)+'% '+((100*height)/array_col[j][i].offsetHeight)+'%';
                }
                else {
                    array_col[j][i].style.left = (-width)+'px';
                    array_col[j][i].style.top = (-height)+'px';
                }
 
            }
        }
    }
    function rotateNoSameTopSize() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if (p < 60 && i <= p+2 && j <= p) {
                    array_col[j][i].style.width = (array_col[j][i].offsetWidth-p*((width*arr_vert)/(height*arr_horiz)))+'px';
                    array_col[j][i].style.height = (array_col[j][i].offsetHeight-p)+'px';
                    array_col[j][i].style.backgroundSize = ((100*width)/array_col[j][i].offsetWidth)+'% '+((100*height)/array_col[j][i].offsetHeight)+'%';
                    //document.getElementById('rez').innerHTML = p;
                }
                else {
                    array_col[j][i].style.left = (-width)+'px';
                    array_col[j][i].style.top = (-height)+'px';
                }
 
            }
        }
    }
}
 
 
В скрипте создается функция kateRotator(), вам нужно в своем файле ее запустить:
 
 
<body onload="kateRotator()">
 
 
или
 
 
<script>
kateRotator();
</script>
 
Если у вас еще осталось желание читать эту статью дальше, то я расскажу о реализации данного слайдера.
 
 
В самой начале мы задаем нужные нам переменные:
 
 
width = 400; /*ширина слайдера и всех картинок*/
height = 300; /*высота слайдера и всех картинок*/
arr_horiz = 10; /*количество элементов деления по горизонтали*/
arr_vert = 5; /*количество элементов деления по вертикали*/
rotator = document.getElementById('rotator'); /*выбор нашего элемента по id*/
 
 
Элементами деления я здесь назвала те прямоугольнички, на которые делятся картинки при смене слайдера. Их количество можно менять, как и размер самого слайдера.
 
 
Внутри элемента с идентификатором rotator мы создаем три блока:
 
 
  • блок с новым видом картинок. В нем будут содержаться div'ы с нашими картинками в роли фона
  • блок с описаниями картинок, которые мы будем брать с атрибута alt="" картинок
  • блок с элементами деления
 
Делаем это так:
 
 
inner = document.createElement('div'); /*блок с картинками*/
rotator.appendChild(inner);
descript = document.createElement('div'); /*блок с описаниями*/
rotator.appendChild(descript);
array = document.createElement('div'); /*блок с элементами деления*/
rotator.appendChild(array);
 
Добавляем этим блокам содержимое:
 
 
for (i = 0; i < rotator.getElementsByTagName('img').length; i++) {
        img_list[i] = document.createElement('div'); /*наши новые картинки*/
        inner.appendChild(img_list[i]);
        src_list[i] = rotator.getElementsByTagName('img')[i].getAttribute('src'); /*берем значения атрибутов src картинок*/
        img_list[i].style.background = 'url('+src_list[i]+')'; /*ставим их фоном в наши div'ы*/
        alt_list[i] = document.createElement('div'); /*элементы описания*/
        descript.appendChild(alt_list[i]);
        if (rotator.getElementsByTagName('img')[i].getAttribute('alt')) {
            alt_list[i].innerHTML = '<div>'+rotator.getElementsByTagName('img')[i].getAttribute('alt')+'</div>'; /*в элементы описания вставляем содержимое артибутов alt картинок*/
        }
        alt_list_bg[i] = document.createElement('div'); /*создаем полупрозрачный фон для описаний*/
        alt_list[i].appendChild(alt_list_bg[i]);
}
 
 
Здесь я опустила стили для всех этих элементов. Их можно посмотреть в полном приведении стрипта. Если кратко, то все блоки с содержимым позиционируются абсолютно относительно родительского элемента rotator, у которого стоит overflow: hidden. Блоки с картинками в своем родителе также спозиционированы абсолютно, их размеры равны выше заданным width и height. Хочу напомнить, что ни количество, ни размер изначальных картинок значения не имеют. Количество высчитывается, размеры задаются.
 
 
img_list[i].style.width = width+'px';
img_list[i].style.height = height+'px';
 
 
 
Когда мы взяли с картинок всю нужную информацию, мы можем их удалить:
 
 
for (i = 0; i < 30*rotator.getElementsByTagName('img').length; i++) {
        document.getElementById('rez').innerHTML = rotator.getElementsByTagName('img')[0].getAttribute('src');
        rotator.removeChild(rotator.getElementsByTagName('img')[0]);
}
 
 
 
Теперь займемся созданием элементов деления. Это будут маленькие блоки. Их количество мы задавали выше. Их размеры будут зависеть от этого количества. Элементы деления будут абсолютно спозиционированы со своими значениями left и top. По виду они будут напоминать двухмерную матрицу, потому реализуем их двухмерным массивом:
 
 
 
for (k = 0; k < arr_horiz; k++) {
        array_col[k] = document.createElement('div'); /*вспомогательный массив для создания двухмерного*/
}
for (i = 0; i < arr_horiz; i++) {
        for (j = 0; j < arr_vert; j++) {
            array_col[j][i] = document.createElement('div'); /*создаем наши элементы*/
            array.appendChild(array_col[j][i]); /*вставляем в родителя*/
            array_col[j][i].style.width = width/arr_horiz+'px'; /*высчитываем ширину*/
            array_col[j][i].style.height = height/arr_vert+'px'; /*высчитываем высоту*/
            array_col[j][i].style.position = 'absolute'; /*абсолютное позиционирование*/
            array_col[j][i].style.top = array_col[j][i].offsetHeight*j+'px'; /*смещение сверху*/
            array_col[j][i].style.left = array_col[j][i].offsetWidth*i+'px'; /*смещение слева*/
            array_col[j][i].style.backgroundPosition = (-array_col[j][i].offsetLeft)+'px '+(-array_col[j][i].offsetTop)+'px'; /*высчитываем background-position*/
            array_col[j][i].style.backgroundImage = 'url('+src_list[current]+')'; /*задаем фоновое изображение*/
            array_col[j][i].style.backgroundSize = (100*arr_horiz)+'% '+(100*arr_vert)+'%'; /*высчитываем background-size*/
        }
}
 
 
Теперь запомнил эти значения, чтобы их возвращать после анимированный изменений:
 
 
 
var a = [], b = [], f;
for (i = 0; i < arr_horiz; i++) {
        for (j = 0; j < arr_vert; j++) {
            a[i] = array_col[j][i].offsetLeft;
            b[j] = array_col[j][i].offsetTop;
        }
}
 
Нам осталось задать анимацию всего слайдера и разные анимированные эффекты:
 
 
 
    func = 4; /*задаем дефолтное значение анимации*/
    f = rotateOpacity;
    setTimeout(function(){ /*делаем задержку выполнения 5 секунд*/
        setInterval(function () { /*далаем интервал анимации 50 миллисекунд*/
            for (i = 0; i < arr_horiz; i++) { /*обнуляем значение до дефолтных после изменения при анимации*/
                for (j = 0; j < arr_vert; j++) {
                    array_col[j][i].style.left = a[i]+'px';
                    array_col[j][i].style.top = b[j]+'px';
                    array_col[j][i].style.opacity = 1;
                    array_col[j][i].style.width = width/arr_horiz+'px';
                    array_col[j][i].style.height = height/arr_vert+'px';
                    array_col[j][i].style.backgroundSize = (100*arr_horiz)+'% '+(100*arr_vert)+'%';
                }
            }
            f(); /*запускаем анимацию*/
            p = p+1; /*запускаем счетчик анимации*/
            if (p == 100) { /*когда счетчик равен 100, делаем смену картинки и анимации*/
                func = Math.floor(Math.random()*7); /*функцию анимации выбираем по рандому*/
                if (func == 0) { /*при разных значениях получаем разные анимации*/
                    f = rotateHorizLines;
                } else if (func == 1) {
                    f = rotateVertLines;
                } else if (func == 2){
                    f = rotateOpacity;
                } else if (func == 3){
                    f = rotateDiagLines;
                } else if (func == 4){
                    f = rotateSize;
                } else if (func == 5){
                    f = rotateNoSameBottomSize;
                } else if (func == 6){
                    f = rotateNoSameTopSize;
                }
                p = 0; /*обнуляем счетчик*/
                if (current < inner.childNodes.length-1) { /*изменяем значение current, которое равно номеру картинки, которая отображается*/
                    current = current+1;
                }
                else {
                    current = 0;
                }
                for (i = 0; i < arr_horiz; i++) { /*меняем фон элементов деления*/
                    for (j = 0; j < arr_vert; j++) {
                        array_col[j][i].style.backgroundImage = 'url('+src_list[current]+')';
                        array_col[j][i].style.opacity = 1;
                    }
                }
                setTimeout(function(){ /*немножко ждем для красоты и меняем отображаемую картинку*/
                    for (i = 0; i < inner.childNodes.length; i++) {
                        img_list[i].style.opacity = 0;
                        alt_list[i].style.opacity = 0;
                    }
                    if (current < inner.childNodes.length-1) {
                        img_list[current+1].style.opacity = 1;
                        alt_list[current+1].style.opacity = 1;
                    }
                    else {
                        img_list[0].style.opacity = 1;
                        alt_list[0].style.opacity = 1;
                    }
                },100);
                opacity = 1;
            }
        }, 50);
    },5000);
 
Немножко поясню... У нас есть блоки вот такие:
 
<div class="rotator-img" style="background-image: url(http://kate-land.net/images/stories/cat1.jpg); background-size: 100%; width: 400px; height: 300px; position: absolute; opacity: 0; z-index: 2; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></div>
 
У каждого из них размер 400*300, занимает весь размер слайдера. У каждого блока есть фоновое изображение от вставленных картинок. Но поверх этих блоков с картинками есть элементы деления, у которых такое же фоновое изображение, но разбитое на маленькие кусочки. Когда у элементов деления фоновое изображение под номеров i, у блока с картинкой оно под номером i+1. То есть, элементы деления, разлетаясь в разные стороны, открывает следующую по счету картинку.
 
 
Теперь немного о анимации. Поскольку в JavaScript нет встроенной анимации, нужно при помощи setInterval делать часто мелкие изменения для перехода элемента из одного состояния в другое. То есть, есть анимированные эффекты для элементов деления, которые происходят в много мелких ходов. И есть анимация смены картинки, которая происходит реже(когда счетчик p равен 100). Надеюсь, это понятно.
 
 
Остались сами анимированные эффекты.
 
 
Смена картинки через изменения прозрачности, аналог fadeIn, fadeOut. Для изменения прозрачности будем использовать счетчик p.
 
 
 
function rotateOpacity() {
        if (opacity > 0) {
            opacity = opacity-p*0.01;
        }
        else {
            opacity = 0;
        }
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if (j == 3 || j == 1) {
                    array_col[j][i].style.opacity = opacity-0.3;
                }
                else if (i == 2 || i == 4 || i == 6 || i == 8) {
                    array_col[j][i].style.opacity = opacity-0.3;
                } else {
                    array_col[j][i].style.opacity = opacity;
                }
            }
        }
}
 
 
Изменение картинки через горизонтальные линии. Аналог анимированного изменения свойства left. Для красоты добавляем немного нюансов - разные линии будут двигаться с разной скоростью и некоторые прямоугольнички будут выпадать из тусовки:
 
function rotateHorizLines() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if(array_col[j][i].offsetLeft > -array_col[j][i].offsetWidth){
                    if (j == 3 || j == 1) {
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft-p*20)+'px';
                    }
                    else {
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft-p*15)+'px';
                    }
                    if (i == 9 || i == 7 || i == 5) {
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+10)+'px';
                    } else {
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft-10)+'px';
                    }
                }
            }
 
        }
}
 
 
Вертикальные линии делаем аналогично:
 
 
function rotateVertLines() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if(array_col[j][i].offsetTop > -array_col[j][i].offsetHeight){
                    if (i == 0 ||i == 2 || i == 4 || i == 6 || i == 8) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop-p*15)+'px';
                    }
                    else {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop-p*20)+'px';
                    }
                }
                if (j == 0 || j == 2 || j == 4) {
                    array_col[j][i].style.top = (array_col[j][i].offsetTop+10)+'px';
                }
                else {
                    array_col[j][i].style.top = (array_col[j][i].offsetTop-10)+'px';
                }
            }
 
        }
 
}
 
 
Теперь будем смещать элементы деления по диагонали, изменяя значения свойств left и top. Также отдельным элементам будем задавать большую/меньшую скорость. Тогда наши прямоугольнички будут улетать не всей кучей, а немного вразнобой. Тут пришлось помучаться в индексами элементов и координатами))
 
 
function rotateDiagLines() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if(array_col[j][i].offsetTop > -array_col[j][i].offsetHeight){
                    if (j == 4 && i == 2 || j == 4 && i == 6 || j == 2 && i == 0) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*10)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*10)+'px';
                    } else if (j == 2 && i == 0 || j == 5 && i == 4 || j == 5 && i == 3) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*12)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*12)+'px';
                    } else if (j == 1 && i == 3 || j == 1 && i == 1 || j == 0 && i == 5) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*15)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*15)+'px';
                    } else if (j == 0 && i == 2 || j == 3 && i == 2 || j == 0 && i == 6) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*17)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*17)+'px';
                    } else if (j == 0 && i == 0 || j == 4 && i == 3 || j == 2 && i == 3) {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*18)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*18)+'px';
                    }
                    else {
                        array_col[j][i].style.top = (array_col[j][i].offsetTop+p*19)+'px';
                        array_col[j][i].style.left = (array_col[j][i].offsetLeft+p*19)+'px';
                    }
                }
            }
        }
}
 
 
Следующие три эффекта похожи. В них изменяются размеры прямоугольничков, они пропадают. В первом эффекте только размеры, во втором и третьем - изменение размеров неоднородно.
 
 
function rotateSize() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if (p < 60) {
                    array_col[j][i].style.width = (array_col[j][i].offsetWidth-p*((width*arr_vert)/(height*arr_horiz)))+'px';
                    array_col[j][i].style.height = (array_col[j][i].offsetHeight-p)+'px';
                    array_col[j][i].style.backgroundSize = ((100*width)/array_col[j][i].offsetWidth)+'% '+((100*height)/array_col[j][i].offsetHeight)+'%';
                }
                else {
                    array_col[j][i].style.left = (-width)+'px';
                    array_col[j][i].style.top = (-height)+'px';
                }
 
            }
        }
}
 
 
 
 
function rotateNoSameBottomSize() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if (p < 60 && i <= (arr_horiz-p) && j <= (arr_vert-p)) {
                    array_col[j][i].style.width = (array_col[j][i].offsetWidth-p*((width*arr_vert)/(height*arr_horiz)))+'px';
                    array_col[j][i].style.height = (array_col[j][i].offsetHeight-p)+'px';
                    array_col[j][i].style.backgroundSize = ((100*width)/array_col[j][i].offsetWidth)+'% '+((100*height)/array_col[j][i].offsetHeight)+'%';
                }
                else {
                    array_col[j][i].style.left = (-width)+'px';
                    array_col[j][i].style.top = (-height)+'px';
                }
            }
        }
 }
 
 
 
 
function rotateNoSameTopSize() {
        for (i = 0; i < arr_horiz; i++) {
            for (j = 0; j < arr_vert; j++) {
                if (p < 60 && i <= p+2 && j <= p) {
                    array_col[j][i].style.width = (array_col[j][i].offsetWidth-p*((width*arr_vert)/(height*arr_horiz)))+'px';
                    array_col[j][i].style.height = (array_col[j][i].offsetHeight-p)+'px';
                    array_col[j][i].style.backgroundSize = ((100*width)/array_col[j][i].offsetWidth)+'% '+((100*height)/array_col[j][i].offsetHeight)+'%';
                    //document.getElementById('rez').innerHTML = p;
                }
                else {
                    array_col[j][i].style.left = (-width)+'px';
                    array_col[j][i].style.top = (-height)+'px';
                }
            }
        }
}
 
 
 
 
 

Additional Info

Комментарии  

 
+1 #5 kat-khmara 08.10.2016 23:06
Цитирую Диванные войска:
Был у меня один друг, он серверную часть на js писал и клиентскую и верстку.... Его, конечно, потом в дурку забрали :-*

Тепер щось подібне називають Full Stack Developer'ом :)
Цитировать
 
 
+1 #4 Диванные войска 08.10.2016 18:21
Был у меня один друг, он серверную часть на js писал и клиентскую и верстку.... Его, конечно, потом в дурку забрали :-*
Цитировать
 
 
0 #3 kat-khmara 28.03.2014 08:24
Спасибо за комментарий! :-) Согласна, что код не особо хорошо выглядит. :-) Очень давно его писала! Постараюсь найти время, чтобы переделать.
Цитировать
 
 
0 #2 Андрей 24.03.2014 18:59
Доброго времени суток!:) Не хотел сначала писать комментарий, но всё-таки решился. Снимаю перед вами шляпу. Девушка, которая программирует это замечательно. Лазил по просторам интернета, просто проглядывая, что пишут другие. Слайдер-то, конечно, замечательный, но стиль кода - просто кошмарный, не в обиду будет сказано. Судя по всему, вы перешли на javascript с какого-то другого, более строгого языка, вроде Си или Java и вместе с этим принесли с собой все привычки :) Хотел просто попросить для будущих читателей поправить стиль, убрать кучу лишних строк кода, а некоторые места наоборот разгрузить. И, внесите, пожалуйста, комментарии непосредственно в скачиваемый фаил. Заранее благодарю :) Возможно сейчас, если не засну, сделаю версию 2.0.0. Ну или 1.1.0 :)
Цитировать
 
 
0 #1 Алексей 06.03.2014 20:26
Доброго времени суток!
Слайд красивый, а главное - простой, поэтому очень нравится. Но хотелось бы спросить. Если не трудно, подскажите, пожалуйста.
На самом деле, хотелось бы на выходе получить еще более простой слайдер. И именно на javascript. То есть эффекты перехода сами не нужны, простая плавная смена картинок. Или, например, уход картинки в сторону, не по частям, а целиком. И чтобы присутствовали кнопки переклюяения картинок слайдера.
Сложно это все проделать с вашим слайдером, наверно, да? Чуть ли не еще один скрипт писать... :) Или можно как-то внести небольшие изменения, и все будет в порядке...
P.S. Я сам не спец по этим вопросам, но как-то не могу подходящий слайдер на javascript.
Цитировать
 

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов