Реклама Google
Ещё реклама Google
Адаптивная галерея
0 за 0 против
дата 2014-11-20
поблагодарили 0
просмотров 412
статью добавил DooMka
добавил
DooMka
Адаптивная галерея написанная лично мной, не самый лучший вариант исполнения, но тем-ни менее

Html5 HTML


            <div class="gall">
                <div>
                    <div><div><img src="/img/g/1.jpg"></div><div><img src="/img/g/2.png"></div><div><img src="/img/g/3.jpg"></div><div><img src="/img/g/4.jpg"></div></div>
                </div>
            </div>

            <div onclick="gall.prew()">
                PREW
            </div>
            
            <div onclick="gall.after()">
                NEXT
            </div>


Js javascript


var gall = {
    time: 4000, // скорость автомата
    movet: 2000, // время анимации css
    set: null,
    mov: false, // move standart
    movp: false, // prew move
    elem: null,
    arr: null,
    move: function () {
        gall.mov = true;
        gall.elem.className = 'move';
        gall.elem.style.marginLeft = '-200%';
        gall.set = setTimeout(gall.finish, gall.movet);
    },
    prew: function () {
        if (gall.mov) {
            clearTimeout(gall.set);
            gall.mov = false;
            gall.elem.style.marginLeft = '-100%';
            gall.set = setTimeout(gall.move, gall.time);
        } else {
            if (gall.movp) {
                return false;
            }
            clearTimeout(gall.set);
            gall.movp = true;
            gall.elem.className = 'move';
            gall.elem.style.marginLeft = '0';
            gall.set = setTimeout(gall.prewend, gall.movet);
        }
    },
    after: function () {
        if(gall.mov){
            return false;
        }
        clearTimeout(gall.set);
        gall.mov = true;
        gall.elem.className = 'move';
        gall.elem.style.marginLeft = '-200%';
        gall.set = setTimeout(gall.finish, gall.movet);
    },
    prewend: function () {
        gall.movp = false;
        gall.mov = false;
        var max = gall.arr.children.length - 1;
        gall.elem.className = '';
        var child = gall.arr.children[max];
        var n = child.cloneNode(true);
        gall.arr.removeChild(gall.arr.children[max]);
        gall.arr.insertBefore(n, gall.arr.children[0]);
        gall.elem.style.marginLeft = '-100%';
        gall.set = setTimeout(gall.move, gall.time);
    },
    finish: function () {
        gall.movp = false;
        gall.mov = false;
        var child = gall.arr.children[0];
        var n = child.cloneNode(true);
        gall.arr.removeChild(child);
        gall.arr.appendChild(n);
        gall.elem.className = '';
        gall.elem.style.marginLeft = '-100%';
        gall.set = setTimeout(gall.move, gall.time);
    }
};



window.onload = function () {
    gall.elem = document.getElementsByClassName("gall")[0].children[0];
    gall.arr = document.getElementsByClassName("gall")[0].children[0].children[0];
    gall.set = setTimeout(gall.move, gall.time);
};


Css3 CSS3



/* gallery */
.gall{
    position: relative;
    margin: 0 auto;
    width: 90%;
    max-width: 1042px;
    min-height: 300px;
    overflow: hidden;
}
.gall > div{
    position: absolute;
    margin-left: -100%;
    width: 400%;
}
.gall > div > div{
    display: table;
    width: 100%;
}
.gall > div > div > div{
    display: table-cell;
    width: 25%;
    vertical-align: top;
}
.gall > div > div img{
    width: 100%;
}
.move{
    -webkit-transition: margin-left 2s;
    -ms-transition: margin-left 2s;
    -o-transition: margin-left 2s;
    -moz-transition: margin-left 2s;
    transition: margin-left 2s; /* без префикса - на будущее */
}
/* end gallery */
все пользователи
все группы

разработчики