BODY BACKGROUND SLIDER-7

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

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

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

<style>

html, body {margin:0;padding:0}

body {background:#173377;}

.container {margin:0;padding:0;width:1600px;height:900px;position: relative;}

.container .slide {

z-index: 1;

margin:0;padding:0;

position: absolute;

width: 100%;

top: 0;

left: 0;

height: 100%;

transition: opacity 1s ease-in-out;

background-position: center center;

background-repeat: no-repeat;

background-size: cover;

opacity: 0;}

.container .slide.show {opacity: 1;}

</style>

function cycleBackgrounds() {

var index = 0;

$imageEls = $('.container .slide');

setInterval(function () {

index = index + 1 < $imageEls.length ? index + 1 : 0;

$imageEls.eq(index).addClass('show');

$imageEls.eq(index - 1).removeClass('show');

}, 4000);

};

// Document Ready.

$(function () {

cycleBackgrounds();

});

</script>

</div>