var banners = [ ["image0a.jpg", ""], ["image1a.jpg", ""], ["image2 (2).jpg", ""], ["image3 (2).jpg", ""], ["image4a.jpg", ""], ] var timer = 100; //console.log(banners); var style = document.createElement('style'); style.type = 'text/css'; style.appendChild(document.createTextNode('.fadeit { position:relative;display:block;float:left;width:542px;height:200px;overflow:hidden; }')); style.appendChild(document.createTextNode('.fadeit div, .fadeit img { position:absolute;display:block;min-width:542px;min-height:200px; }')); for (var i = 1; i <= banners.length; i++) { style.appendChild(document.createTextNode('.fadeit div:nth-child('+i+') { animation:fade'+i+' '+timer+'s infinite; }')); } var keyframe = 100/banners.length; for (var i = 1; i <= banners.length; i++) { var node = ''; for (var j = 1; j <= banners.length+1; j++) { var k = keyframe * (j-1); opacity = i == j ? 1 : 0; if (i==1 && j==banners.length+1) opacity = 1; node += k+'% {opacity:'+opacity+'} '; } style.appendChild(document.createTextNode('@keyframes fade'+i+' { '+node+'}')); } style.appendChild(document.createTextNode('.fadeit p { position:absolute;top:160px;right:32px;color:#fff;font-size:17px;margin:0;z-index:999;text-indent:0;text-shadow:1px 1px 0px #000; }')); style.appendChild(document.createTextNode('.fadeit::before { content:"";width:542px;height:12px;position:absolute;z-index:99;top:auto;right:0;bottom:0;left:0;background-image:linear-gradient(to bottom, transparent 20%, #000 100%); }')); style.appendChild(document.createTextNode('.fadeit { width:calc(100% - 209px);max-width:542px; }')); // RESPONSIVE OVERRIDE document.head.appendChild(style); /*document.write('
'+banners[i][1]+'
'); document.write('