ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Δευτέρα, 4 Φεβρουαρίου 2013

ΕΝΑΣ ΑΠΛΟΣ ΣΛΑΙΝΤΕΡ ΓΙΑ ΤΟ ΣΑΙΤ ΜΑΣ


   Ποιο κάτω βλέπουμε τον κώδικα ενός πολύ απλού σλαιντερ που μπορούμε να βάλουμε στο blog μας.Μπορούμε να το βάλουμε όπου θέλουμε εμείς,να ορίσουμε τις διαστασεις του(ίδιες για όλες τις φωτο).Μπορουμε να προσθεσουμε οσες φωτο θελουμε (κωδικας <li>...</li>).Σαν gadget με τον γνωστό τρόπο από τον πίνακα ελέγχου .


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>news rotator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
window.onload=function() {
aLI=document.getElementById('news').getElementsByTagName('li');
for(var i=0; i<aLI.length; i++) {
    aLI[i].style.display="none";
    aLI[i].getElementsByTagName('p')[0].onmouseover=function() {clearTimeout(timerRUN);};
    aLI[i].getElementsByTagName('p')[0].onmouseout=function() {rotate(inView());};
    }
rotate(aLI.length-1);
};

var aLI=[];
var timerRUN=null;
var Speed=3000; //change as required
function rotate(idx) {
aLI[idx].style.display="none";
idx=(idx<aLI.length-1)? ++idx : 0;
aLI[idx].style.display="block";
timerRUN=setTimeout('rotate('+idx+')', Speed);
}

function inView() {
var newsItem=0;
for(var i=0; i<aLI.length; i++) {
    if(aLI[i].style.display=="block") {newsItem= i;}
    }
return newsItem;
}
</script>
<style type="text/css">
#news li {
width:300px;
overflow:hidden;
border:1px solid #000;
list-style-type:none;
color:#000;
background:#ddd;
}
#news li img {
display:block;
}
#news li p {
margin:0;
padding:3px;
}
</style>
</head>
<body>
<ul id="news">
    <li>
        <img src="image1.jpg" width="300" height="200" alt=""><p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</p>
    </li>
    <li>
        <img src="image2.jpg" width="300" height="200" alt=""><p>Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
    </li>
    <li>
        <img src="image3.jpg" width="300" height="200" alt=""><p>Mirum est notare quam littera gothica, quam nunc putamus parum claram.</p>
    </li>
</ul>
</body>
</html>


    Με το ροζ ρυθμίζουμε την ταχυτητα εναλλαγης.
    Κιτρινο ωριζμό  (φωτο,ειδησσεις,προιοντα,κλπ)
    Πρασινο το url των φωτο
    Κοκκινο τις διαστασεις.
    Μπλε  γραφουμε τον σχολιασμο μας.

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.