CSS
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body{line-height:1;}article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:block;}nav ul{list-style:none;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none;}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}
@-webkit-keyframes open {
from {
opacity: 0;
}
to { opacity: 1; }
}
@-o-keyframes open {
from {
opacity: 0;
}
to { opacity: 1; }
}
@-moz-keyframes open {
from {
opacity: 0;
}
to { opacity: 1; }
}
@keyframes open {
from {
opacity: 0;
}
to { opacity: 1; }
}
.slider_wrapper {
width: 100%;
height: auto;
text-align: center;
}
.slider_wrapper > ul {
font-size: 0;
display: inline-block;
height: auto;
width: auto;
/*white-space: nowrap;*/
}
.slider_wrapper > ul > li {
display: inline-block;
}
.slider_wrapper > ul > li > a {
position: relative;
display: inline-block;
height: auto;
}
.slider_wrapper > ul > li > a:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
background: rgba(1,1,1,.5);
z-index: 5;
transition: all .2s;
}
.slider_wrapper >...
JavaScript
'use strict';
var doc = document,
body = doc.getElementsByTagName('body')[0],
slider = doc.getElementById('slider'),
linkArr = slider.querySelectorAll('a'),
linkArrImg = slider.querySelectorAll('a img'),
innerImg,
innerImgField = body.querySelector('.innder_image_filed'),
init = function() {
slider.className = 'slider_wrapper';
innerImg = doc.createElement('div');
innerImg.className = 'inner_image_wrapepr';
body.appendChild(innerImg);
close();
for (var i = 0; i < linkArr.length; i++) {
linkArr[i].addEventListener('click', function(e){
e.preventDefault(e);
click();
})
}
},
click = function() {
innerImg.innerHTML = '<div class="innder_image_filed">' +
'<img src="' + event.target.getAttribute('src') + '" alt="" />' +
'</div>'+
'<div class="inner_image__background"></div>';
innerImg.className += ' show';
setTimeout(size, 10)
},
size = function() {
body.querySelector('.innder_image_filed').style.width = body.querySelector('.innder_image_filed img').offsetWidth + 'px';
body.querySelector('.innder_image_filed').style.height = body.querySelector('.innder_image_filed img').offsetHeight + 'px';
body.querySelector('.innder_image_filed').style.marginTop = -(body.querySelector('.innder_image_filed img').offsetHeight)/2 + 'px';
setTimeout(next, 10)
},
close = function() {
body.addEventListener('click', function(){
if(event.target.className == 'inner_image__background' )
innerImg.classList.remove('show');
})
},
next = function() {
body.querySelector('.innder_image_filed img').addEventListener('click', function(){
var linkSelector = this.getAttribute('src');
for (var i = 0; i < linkArrImg.length; i++) {
if (linkArrImg[i].getAttribute('src') == linkSelector) {
var selectorP = doc.querySelectorAll('li img')[i+1].getAttribute('src');
// console.log(selectorP)
body.querySelector('.innder_image_filed img').setAttribute('src',...