Μιας που έχουμε εξεταστική, δεν είχα τι να κάνω, οπότε είπα "wtf, ας το κάνω...", άνοιξα μια μπύρα (beer programming ντε! ) και ξεκίνησα....
Πώς λειτουργεί το όλο πράμα:
Έχουμε ένα img και 3 κουμπιά: previous, auto, next.
Επειδή το έκανα στα γρήγορα έκανα απλά έναν φάκελο με το όνομα images και έβαλα 12 εικόνες με ονόματα 1.jpg, 2.jpg κ.ο.κ και δεν έκατσα να κάνω κάτι που να ασχολείται με πιο πολύπλοκα ονόματα.
Anyways, let's write some code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Image Changer</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//oi vasikes metavlites pou xrisimopoiountai apo oles tis sunartiseis
var i=1;
var timer;
var numberOfPics = 12; //allakste analoga me to plithos twn eikonwn
//i synartisi pou asxoleitai me to na ksekinaei kai na stamataei ton timer
function timerTrigger()
{
//an o timer _DEN_ exei ksekinisei
if(timer == null)
{
//allazoume to koumpi se 'Stop'
document.getElementById('auto').innerHTML = 'Stop';
//kai energopoioume ton timer o opoios se 1000ms
//tha kalesei tin synartisi changePics()
timer = setTimeout('changePics()',1000);
}
else
{
//an o timer exei idi ksekinisei
//allazoume to koumpi se 'Auto'
document.getElementById('auto').innerHTML = 'Auto';
//stamatame ton timer
clearTimeout(timer);
//kai kanoume ti metavliti pou krataei to id tou timer null
timer = null;
}
}
//i synartisi einai ypeythini gia na kanei automata enallagi twn eikonwn
function changePics()
{
//pame stin epomeni eikona kai an exoume kseperasei to plithos twn eikonwn
//tote ksanarxizoume apo tin 1i eikona
i++;
if(i > numberOfPics )
{
i=1;
}
//allazoume to src kai to alt tis eikonas
document.getElementById('image').src = "./images/"+i+".jpg";
document.getElementById('image').alt = i+".jpg";
//gia dokimastikous logous
//document.getElementById('imageName').innerHTML = "./images/"+i+".jpg";
//sto telos ksanakaleitai i changePics() gia na paei stin epomeni eikona
timer = setTimeout('changePics()',1000);
}
//i synartisi pou ekteleitai gia na pigainei stin epomeni eikona manually
function nextPic()
{
i++;
if(i > numberOfPics )
{
i=1;
}
document.getElementById('image').src = "./images/"+i+".jpg";
document.getElementById('image').alt = i+".jpg";
//gia dokimastikous logous
//document.getElementById('imageName').innerHTML = "./images/"+i+".jpg";
}
//i synartisi pou ekteleitai gia na pigainei stin proigoumeni eikona manually
function previousPic()
{
i--;
if( i <= 0 )
{
i=numberOfPics;
}
document.getElementById('image').src = "./images/"+i+".jpg";
document.getElementById('image').alt = i+".jpg";
//gia dokimastikous logous
//document.getElementById('imageName').innerHTML = "./images/"+i+".jpg";
}
</script>
</head>
<body>
<div id="content" align="center">
<img id="image" src="./images/1.jpg" alt="1.jpg" />
<br /><br />
<button id="previous" onclick="previousPic()">Previous</button>
<button id="auto" onclick="timerTrigger()" >Auto</button>
<button id="next" onclick="nextPic()">Next</button>
<br /> <br />
<div id="imageName">
</div>
</div>
</body>
</html>
Όπως είπα και πριν είναι αρκετά απλοϊκό και το έκανα μέσα σε συνολικό χρόνο μισής ώρας.
Μπορεί να γίνει ακόμα πιο δυναμικό και να διαβάσει αυτόματα τα περιεχόμενα του φακέλου των εικόνων, αλλά η γενική ιδέα αυτή είναι.
Σχόλια και προτάσεις ευπρόσδεκτα.
Μπορεί να γίνει ακόμα πιο δυναμικό και να διαβάσει αυτόματα τα περιεχόμενα του φακέλου των εικόνων, αλλά η γενική ιδέα αυτή είναι.
Σχόλια και προτάσεις ευπρόσδεκτα.
ειχα κολλησει λιγακι γιατι ηθελα να το κανω σε μικρο μεγεθος και μου βγαζε αλλου την εικονα, αλλου τα κουμπια αλλα τα εβαλα τα κουμπια μεσα σε ενα div κι ολα καλα... Thanks a lot... Μ' εσωσες!!! ;)
ReplyDelete