BODY BACKGROUND SLIDER-4

BODY BACKGROUND SLIDER-4

Αυτό το body slider μπορεί να μπεί μέσα σε ένα HTML / JAVASCRIPT gadget κουτάκι που υπάρχει στην διάταξη του blog σας είτε σε πλευρική μπάρα είτε στο υποσέλιδο, αλλά μπορεί επίσης να μπεί και μέσα στον κώδικα HTML του blog σας πρίν την ετικέτα </head>.

Απλά αντιγράψτε και επικολλήστε τον παρακάτω κώδικα σε όποιοδήποτε gadget θέλετε ή μέσα στον κυρίως κώδικα του blog σας αλλάζοντας αν θέλετε τα πράσινα links των εικόνων με τα links των εικόνων της αρεσκείας σας. Ένα άλλο που μπορείτε να ρυθμίσετε αν θέλετε είναι το κάθε πότε θα αλλάζουν. Αυτό μπορείτε να το αλλάξετε 3 γραμμες πριν το τέλος του κώδικα που γράφει setTimeout(nextBackground, 4000);} και ξανά στην επόμενη γραμμή που γράφει setTimeout(nextBackground, 4000); Το 4000 είναι τα milliseconds. Αν θέλετε να προσθέσετε περισσότερες είκόνες πρέπει να βάλετε πρώτα τα link τους εντός του <script>.

ΔΕΙΤΕ ΤΟ ΣΕ ΛΕΙΤΟΥΡΓΙΑ ΣΕ ΑΥΤΟ ΤΟ DEMO BLOG ►

▼ ΚΩΔΙΚΑΣ ΜΕ 12 ΕΙΚΟΝΕΣ

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(function() {

var body = $('body');

var backgrounds = new Array(

'url(https://i.imgur.com/phbIVY1.jpg)',

'url(https://i.imgur.com/Jrw6vMy.jpg)',

'url(https://i.imgur.com/KGh0xkb.jpg)',

'url(https://i.imgur.com/kmCowJw.jpg)',

'url(https://i.imgur.com/QDoQ4pG.jpg)',

'url(https://i.imgur.com/6W5A1Bg.jpg)',

'url(https://i.imgur.com/XYTN2eD.jpg)',

'url(https://i.imgur.com/OLZZEyp.jpg)',

'url(https://i.imgur.com/LXa5y1y.jpg)',

'url(https://i.imgur.com/LzQtV55.jpg)', 

'url(https://i.imgur.com/wIBlr1Z.jpg)',

'url(https://i.imgur.com/JJWRsYq.jpg)');

var current = 0;

function nextBackground() {

body.css('background', backgrounds[current = ++current % backgrounds.length]);

setTimeout(nextBackground, 4000);}

setTimeout(nextBackground, 4000);

body.css('background', backgrounds[0]);});

</script>