Реклама Google
Реклама Google
поисковые роботы
|
Адаптивная галерея
|
дата 2014-11-20
поблагодарили 0 просмотров 926 |
| ||||||||||||
Адаптивная галерея написанная лично мной, не самый лучший вариант исполнения, но тем-ни менее
HTML
javascript
CSS3
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>
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);
};
/* 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 */
Последнее на сайте
|
Также, как вариант, купить тариф на GGsel :D
https://ggsel.net/catalo
|
|
|
621000
|
|
|
621000
|
|
|
new record
|
|
ну и зря не веришь тренироваться надо вот и всё.
|
|
|
620000
|
|
|
583000
|
|
|
308000
|
Последнее на форуме
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|