BODY BACKGROUND SLIDER-3

BODY BACKGROUND SLIDER-3

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

Απλά αντιγράψτε και επικολλήστε τον παρακάτω κώδικα σε όποιοδήποτε gadget θέλετε ή μέσα στον κυρίως κώδικα του blog σας αλλάζοντας αν θέλετε τα πράσινα links των εικόνων που έχουν αναλογία 16:9 με τα links των εικόνων της αρεσκείας σας. Αν οι εικόνες που θα επιλέξετε έχουν την ίδια αναλογία 16:9 δεν χρειάζεται να κάνετε κάτι άλλο, αν όχι αλλάξετε τις διαστάσεις των εικόνων εκεί που γράφει background-size:1600px 900px; με τις δικές σας διαστάσεις. Ένα άλλο που μπορείτε να ρυθμίσετε αν θέλετε είναι το πόσες εικόνες θα αναπαράγονται και κάθε πότε θα αλλάζουν. Αυτό μπορείτε να το αλλάξετε στη προτελευταία γραμμή κώδικα που γράφει run(4000, 15); το 4000 είναι τα milliseconds και το 15 είναι ο αριθμός των εικόνων που θα αναπαράγονται. Αν θέλετε να προσθέσετε περισσότερες είκόνες πρέπει να βάλετε πρώτα τα link τους εντός του πρώτου μέρους του κώδικα κάτω από το #b15{background-image:url(https://i.imgur.com/VZcildl.jpg);} συνεχίζοντας με #b16 image:url(Νέο δικό σας link εικόνας);} και τέλος να αλλάξετε το 15 που είναι ο αριθμός των εικόνων που θα αναπαράγονται, με τον αριθμό των συνολικών εικόνων που θα αναπαράγονται μετά και την προσθήκη των νέων εικόνων.

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

▼ ΚΩΔΙΚΑΣ ΜΕ 15 ΕΙΚΟΝΕΣ ΑΝΑΛΟΓΙΑΣ 16:9

<style>

body {background:#115599;background-image:url(https://i.imgur.com/VZcildl.jpg);background-attachment:fixed;background-position:left top;background-repeat: no-repeat;

background-size:1600px 900px;} 

#b1 {background-image:url(https://i.imgur.com/UKrGMoA.jpg);}

#b2 {background-image:url(https://i.imgur.com/Jrw6vMy.jpg);}

#b3 {background-image:url(https://i.imgur.com/1OB6MoL.jpg);}

#b4 {background-image:url(https://i.imgur.com/aXZruOI.jpg);}

#b5 {background-image:url(https://i.imgur.com/2t5y2Tc.jpg);}

#b6 {background-image:url(https://i.imgur.com/2eSYtrp.jpg);}

#b7 {background-image:url(https://i.imgur.com/seHWgNP.jpg);}

#b8 {background-image:url(https://i.imgur.com/b7cGD5L.jpg);}

#b9 {background-image:url(https://i.imgur.com/CHqxCkI.jpg);}

#b10{background-image:url(https://i.imgur.com/LRmccLf.jpg);}

#b11 {background-image:url(https://i.imgur.com/4hHNp8t.jpg);}

#b12 {background-image:url(https://i.imgur.com/EdBhTYQ.jpg);}

#b13 {background-image:url(https://i.imgur.com/HjoSwfe.jpg);}

#b14 {background-image:url(https://i.imgur.com/phbIVY1.jpg);}

#b15{background-image:url(https://i.imgur.com/VZcildl.jpg);}

</style>      

<script>  

function run(interval, frames) {

var int = 1;

function func() {

document.body.id = "b"+int;

int++;

if(int === frames) {int = 1;}}

var swap = window.setInterval(func, interval);}

run(4000, 15); // milliseconds, frames

</script>