From f3c97f0adabe7d2dbcef2242b7d9503fd712a2e4 Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 27 Oct 2017 18:00:01 +0200 Subject: [PATCH] Ver 3.0 --- README.md | 14 ++++- easy_background.js | 137 ++++++++++++++++++++------------------------- index.html | 33 +++++------ 3 files changed, 90 insertions(+), 94 deletions(-) diff --git a/README.md b/README.md index 74dec81..8dbd8fc 100644 --- a/README.md +++ b/README.md @@ -13,8 +13,18 @@ Just insert: and call easy_background: ``` -// FIRST CHOSE THE CONTAINER AND AFTER SET DELAY TIME AND IMAGE OF SINGLE IAMGE -easy_background("body", 3000, "img/1.jpg", 3000, "img/2.jpg", 3000, "img/3.jpg"); +// FIRST CHOSE THE CONTAINER (selector) AND AFTER SET DELAY TIME AND IMAGE OF SINGLE IAMGE, IF YOU DON'T SET A DELAY TIME, THE SCRIPT TAKE A DELAY TIME OF 3s. + +easy_background("body", + + { + i: ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"], + + d: [2000, 2000, 2000, 2000, 2000] + } + + +); ```
diff --git a/easy_background.js b/easy_background.js index e000e11..3827ff6 100644 --- a/easy_background.js +++ b/easy_background.js @@ -1,106 +1,92 @@ -function easy_background(selector, a1, a2, b1, b2, c1, c2, d1, d2, e1, e2) { - - - function empty_var(x) { - if (x) { - return x; - } else { - return 0; - } - } - - +function easy_background(selector, sld_args) { function empty_img(x) { if (x) { - return ""; + return ""; } else { return ""; } } + //use object same as arrays in php {nameofindex:variable} inside object you can use arrays [value1,val2] (variable in object can be as array + //var sld_args={i:["img/555.jpg","img/44.jpg","img/33.jpg","img/22.jpg","img/11.jpg","img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"],d:[3000,3000,3000,3000,3000] }; + //if delay is empty or forgotten then use this default value + var def_del = 3000; + var p = document.createElement("div"); + p.innerHTML = " "; + p.classList.add("easy_slider"); -var p = document.createElement("div"); -p.innerHTML = " "; -p.classList.add("easy_slider"); - - -document.body.insertBefore(p, document.body.firstChild); - - -document.querySelector(".easy_slider").innerHTML = empty_img(a2) + empty_img(b2) + empty_img(c2) + empty_img(d2) + empty_img(e2); - - -document.querySelector(".easy_slider").style.display = "none"; - - - - - - tot_time = empty_var(a1) + empty_var(b1) + empty_var(c1) + empty_var(d1) + empty_var(e1); - console.log(tot_time); - - - - function slider() { - - - - if (a1) { - setTimeout(function() { - - document.querySelector(selector).style.backgroundImage = "url('" + a2 + "')"; - - }, 0000); // 1 + document.body.insertBefore(p, document.body.firstChild); + //switch all values in object -- objectname.index in you case sld_args is object and i is index of array which keep images (i). We use this function for fill div with img tags + //and for insert delays into empty or forgotten places in object + sld_args.i.forEach(function(v, i) { + if (v) { + document.querySelector(".easy_slider").innerHTML += empty_img(v); + if (typeof sld_args.d[i] == 'undefined' || typeof sld_args.d[i] == '' || sld_args.d[i] == 0) { + sld_args.d[i] = def_del; + } } + }); - if (b1) { - var delay = a1; - setTimeout(function() { + //add various style on selector + document.querySelector(".easy_slider").style.display = "none"; - document.querySelector(selector).style.backgroundImage = "url('" + b2 + "')"; + //add various style on selector + document.querySelector(selector).style.WebkitTransition = "all 0.5s ease-in"; + document.querySelector(selector).style.MozTransition = "all 0.5s ease-in"; + document.querySelector(selector).style.MsTransition = "all 0.5s ease-in"; + document.querySelector(selector).style.OTransition = "all 0.5s ease-in"; + document.querySelector(selector).style.transition = "all 0.5s ease-in"; - }, delay); // 2 - } + //add various style on selector + document.querySelector(selector).style.backgroundSize = "cover"; + document.querySelector(selector).style.backgroundRepeat = "no-repeat"; + document.querySelector(selector).style.backgroundPosition = "center center"; - if (c1) { - var delay = a1 + b1; - setTimeout(function() { + //this n is number of row in object - if first row one function if more than 1 then other + var n = 1; + //li collection previous delays from previous slides + var li = 0; - document.querySelector(selector).style.backgroundImage = "url('" + c2 + "')"; - - }, delay); // 3 - } - - - - if (d1) { - var delay = a1 + b1 + c1; - setTimeout(function() { + function slider() { + //switching all images one by one + sld_args.i.forEach(function(vvv, iii) { + //here go all slides except first + if (n > 1) { + //set delay from collected number from previous slides + var delay = li; + setTimeout(function() { - document.querySelector(selector).style.backgroundImage = "url('" + d2 + "')"; + document.querySelector(selector).style.backgroundImage = "url('" + vvv + "')"; - }, delay); // 4 - } + }, delay); // >1 + //collecting delays from curent + li = li + sld_args.d[iii]; + } + //this function for only first slide + else { + //next row + n++; + //collect delay first time + li = sld_args.d[iii]; + setTimeout(function() { + document.querySelector(selector).style.backgroundImage = "url('" + vvv + "')"; - if (e1) { - var delay = a1 + b1 + c1 + d1; - setTimeout(function() { + }, 0000); // 1 + } - document.querySelector(selector).style.backgroundImage = "url('" + e2 + "')"; - }, delay); // 5 - } + }); }; @@ -112,9 +98,8 @@ document.querySelector(".easy_slider").style.display = "none"; setInterval(function() { // REPEAT slider(); - console.log(tot_time); - - }, tot_time); + //here used length of array of delays in object instead you tot_time variable + }, sld_args.d.length); } diff --git a/index.html b/index.html index c364610..42eb76e 100644 --- a/index.html +++ b/index.html @@ -7,24 +7,16 @@ + + -