ΑΠΛΟ SLIDESHOW ME ΕΝΑΛΛΑΓΗ KEIMENOΥ ΚΑΙ ΕΙΚΟΝΩΝ

ΑΠΛΟ SLIDESHOW ME ΕΝΑΛΛΑΓΗ KEIMENOΥ ΚΑΙ ΕΙΚΟΝΩΝ

Το παρακάτω slideshow ξεκινάει αυτόματα μόνο του και μπορεί να κάνει εναλλαγή μεταξύ κειμένου και εικόνων. Το κείμενο μπορείτε να το βάλετε μόνο στην αρχή ή μόνο στο τέλος ή όπου θέλετε ενδιάμεσα στις εικόνες, ακόμα και να το παραλείψετε. Αλλάξτε τα δικά μου γαλάζια links εικόνων με τα δικά σας links. Αλλάξτε τα κίτρινα κείμενα με δικά σας.

Αλλάξτε τις διαστάσεις του slideshow εκεί που γράφει width:960px; height:600px; και προσέξτε να είναι ίδιες με αυτές των εικόνων σας οι οποίες καλό θα ήταν να έχουν όλες αν όχι την ίδια διάσταση οποσδήποτε όμως την ίδια αναλογία για να ταιριάζουν με τις διαστάσεις του slideshow. Ο χρόνος εναλλαγής μεταξύ των εικόνων αλλάζει εκεί που γράφει .appendTo('#slideshow');},  4000); Δείτε το slideshow σε λειτουργία στο τέλος αυτής της ανάρτησης.

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

<div id="slideshow">

<div id="sampletext">ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ</br>ΠΑΡΑΛΙΑ Νο 1</br>ΝΑΥΑΓΙΟ ΖΑΚΥΝΘΟΣ</div>

<div><img src="http://i.imgur.com/fiVofHI.jpg" alt="ΖΑΚΥΝΘΟΣ" width="960" height="600"></div>    

<div id="sampletext">ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ</br>ΠΑΡΑΛΙΑ Νο 2</br>ΠΟΡΤΟ ΚΑΤΣΙΚΙ ΛΕΥΚΑΔΑ</div>

<div><img src="http://i.imgur.com/rcivwQJ.jpg" alt="ΛΕΥΚΑΔΑ" width="960" height="600"></div>

<div id="sampletext">ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ</br>ΠΑΡΑΛΙΑ Νο 3</br>ΜΥΡΤΟΣ ΚΕΦΑΛΛΟΝΙΑ</div>

<div><img src="http://i.imgur.com/0nyxX2L.jpg" alt="ΚΕΦΑΛΛΟΝΙΑ" width="960" height="600"></div>

<div id="sampletext">ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ</br>ΠΑΡΑΛΙΑ Νο 4</br>ΚΟΥΚΟΥΝΑΡΙΕΣ ΣΚΙΑΘΟΣ</div>

<div><img src="http://i.imgur.com/oSC4D7R.jpg" alt="ΣΚΙΑΘΟΣ" width="960" height="600"></div>

<div id="sampletext">ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ</br>ΠΑΡΑΛΙΑ Νο 5</br>ΕΓΓΡΕΜΝΟΙ ΛΕΥΚΑΔΑ</div>

<div><img src="https://i.imgur.com/H2PNDWB.jpg" alt="ΛΕΥΚΑΔΑ" width="960" height="600"></div></div>

<style>

#sampletext {position:relative; width:960px; height:600px;font :bold 48px Arial;background:#115599;color:#FFF;}

#slideshow > div {position:relative;top: 0px;left: 0px;right: 0px;bottom: 0px;}

</style>

<script>

$("#slideshow > div:gt(0)").hide();

setInterval(function() {$('#slideshow > div:first')

.fadeOut(0)

.next()

.fadeIn(0)

.end()

.appendTo('#slideshow');},  4000);

</script>

ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ
ΠΑΡΑΛΙΑ Νο 1
ΝΑΥΑΓΙΟ ΖΑΚΥΝΘΟΣ

ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ
ΠΑΡΑΛΙΑ Νο 2
ΠΟΡΤΟ ΚΑΤΣΙΚΙ ΛΕΥΚΑΔΑ

ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ
ΠΑΡΑΛΙΑ Νο 3
ΜΥΡΤΟΣ ΚΕΦΑΛΛΟΝΙΑ

ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ
ΠΑΡΑΛΙΑ Νο 4
ΚΟΥΚΟΥΝΑΡΙΕΣ ΣΚΙΑΘΟΣ

ΟΙ 5 ΚΑΛΥΤΕΡΕΣ ΕΛΛΗΝΙΚΕΣ ΠΑΡΑΛΙΕΣ
ΠΑΡΑΛΙΑ Νο 5
ΕΓΓΡΕΜΝΟΙ ΛΕΥΚΑΔΑ