SIMPLE SLIDESHOW WITH NAVIGATION BUTTONS

SIMPLE SLIDESHOW WITH NAVIGATION BUTTONS
ΑΠΛΟ SLIDESHOW ΜΕ BUTTONS
Με τον παρακάτω κώδικα μπορούμε να βάλουμε στο blog μας ένα απλό slideshow με κουμπιά εναλλαγής μεταξύ των εικόνων, με όσες εικόνες θέλουμε, με ότι διαστάσεις θέλουμε, και με όποια ταχύτητα εναλλαγής των εικόνων επιλέξουμε. Αλλάξτε τα μώβ links των εικόνων με τις δικές σας εικόνες. Αλλάξτε τις διαστάσεις του slideshow αλλάζοντας τα γαλάζιανούμερα. Αλλάξτε την ταχύτητα εναλλαγής των εικόνων αλλάζοντας το πορτοκαλί νούμερο. Βάλτε το σωστό αριθμό εικόνων που έχει το slideshow σας αντικαθιστώντας το πράσινο νούμερο (step<9).


<style type="text/css">
text-align:left;
margin: 0;
padding: 0;
#imageContainer {
max-height: 590px;
max-width: 944px;
background-color: #333333;
}
a  {
text-decoration: none;
padding: 0px;
color: #33FFFF;
}
</style>
<script type="text/javascript">
var imgSlide;
var pic = 0;
window.onload = function ()
{
imgSlide = document.getElementById('img');
// preload images
images = new Array();
images[0] = new Image()
images[0].src = "https://lh5.googleusercontent.com/-K7auwzq2lPk/UiiIvU7QHPI/AAAAAAAAJLI/c5aQs1DrUUw/w1208-h755-no/LEFKADA-03.jpg"
images[1] = new Image()
images[1].src = "https://lh3.googleusercontent.com/-iHpUXMPF_2U/UiiIviNxdII/AAAAAAAAJLM/7Q8ShXmAat0/w1208-h755-no/LEYKADA-24.jpg"
images[2] = new Image()
images[2].src = "https://lh4.googleusercontent.com/-LB8zka6NnYA/UiiIxk_UOSI/AAAAAAAAJLU/YTAWF35UMF8/w1208-h755-no/LEYKADA-33.jpg"
images[3] = new Image()
images[3].src = "https://lh4.googleusercontent.com/-RA6WwNSgQZs/UiiI00-Hd4I/AAAAAAAAJLk/wAesP7BV1XY/w1208-h755-no/LEYKADA-40.jpg"
images[4] = new Image()
images[4].src = "https://lh6.googleusercontent.com/-rYFEmmnBIPc/UiiIsH-kt3I/AAAAAAAAJK0/wxyhIm00mb4/w1208-h755-no/LEYKADA-15.jpg"
images[5] = new Image()
images[5].src = "https://lh5.googleusercontent.com/-xoRjaryAc9g/UiiJQylwIqI/AAAAAAAAJMU/pmISgNnhBIw/w1208-h755-no/KERKYRA-16.jpg"
images[6] = new Image()
images[6].src = "https://lh3.googleusercontent.com/-iOVUvdDaKYs/UneTpxlN0_I/AAAAAAAAJtg/WwRlzagKsmQ/w1208-h755-no/KEFALONIA-27.JPG"
images[7] = new Image()
images[7].src = "https://lh5.googleusercontent.com/-HVjJAI6w9oo/UneTzBuu6UI/AAAAAAAAJuA/Fl47Ee-i42A/w1208-h755-no/KEFALONIA-30.jpg"
images[8] = new Image()
images[8].src = "https://lh6.googleusercontent.com/-xMrBsaQHZNo/UneT6wxUc8I/AAAAAAAAJuc/e8gRNK9YdRM/w1208-h755-no/KEFALONIA-35.jpg"
images[9] = new Image()
images[9].src = "https://lh6.googleusercontent.com/-J_Rk_piwwB0/UneUATS4u5I/AAAAAAAAJuw/6JcMeTQs1jI/w1208-h755-no/KEFALONIA-38.jpg"
}
function slide()
{
imgSlide.src = images[pic].src;
if(pic < 9) // images.length - 1 can be used here
{
pic++;
}
else
{
pic = 0
}
timer = setTimeout(slide, 4000);
}
function prev()
{
if(timer)
stopSlide();
if(pic == 0)
{
pic = 9;
imgSlide.src = images[pic].src;
}
else
{
pic--;
imgSlide.src = images[pic].src;
}
}
function next()
{
if(timer)
stopSlide();
if(pic == 9)
{
pic = 0;
imgSlide.src = images[pic].src;
}
else
{
pic++;
imgSlide.src = images[pic].src;
}
}
function stopSlide()
{
clearTimeout(timer);
}
</script>
<div id="imageContainer">
<img id="img" src="https://lh5.googleusercontent.com/-mifByl_Mn1k/UiiKmOjIMNI/AAAAAAAAJQc/qLkVIodbSlE/s1152/SKOPELOS-30.jpg" alt="SKOPELOS" title="SKOPELOS" width="944" height="590"/></div>
<a href="JavaScript:prev()"><button style="width:140px; height:28px; background:#FF6000; color:#000000;  font: 14px Arial;">◄◄ PREVIOUS…</button></a>
<a href="JavaScript:slide()"><button style="width:100px; height:28px; background:#207907; color:#FFFFFF;  font: 14px Arial;">…PLAY ►</button></a>
<a href="JavaScript:next()"> <button style="width:120px; height:28px; background:#115595; color:#FFFFFF;  font: 14px Arial;">…NEXT ►►</button></a>
<a href="JavaScript:stopSlide()"><button style="width:100px; height:28px; background:#FF1111; color:#FFFFFF;  font: 14px Arial;">STOP ■</button></a>
<a href="http://imgur.com/a/2OFXh/layout/horizontal#0" target="_blank"><button style="width:180px; height:28px; background:#740777; color:#FFFFFF;  font: 14px Arial;">GO TO ALBUM FOLDER</button></a>
<a href="http://the-best-widgets.blogspot.gr" target="_blank"><button style="width:180px; height:28px; background:#FFFF00; color:#000000;  font: 14px Arial;">GO TO MY HOMEPAGE</button></a>


SKOPELOS

1 σχόλιο:

  1. Να είσαι καλά ρε φίλε, πολύτιμες οι πληροφορίες σου.

    Ευχαριστώ πολύ

    ΑπάντησηΔιαγραφή