Auto. img Wechsler ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
array
aufbau
aufruf
bild
code
ecke
frage
glauben
header
helfen
jemand
komma
komplette code
ordner
routine
sekunde
tag
team
url
webseite
-
Hi,
hab schon das tutorial versucht von limacity aber ist warscheinlich schon zu alt
2005
Jetzt wollt ich tag/frage">fragen ob jemand einen einfachen code hat um mit JS AJAX oder ähnliches bilder automatisch zu gewechselt??
also der aufbau sieht so aus :
body
div
div
img <------ soll gewechselt werden
/div
/div
/body
da ich aber mehrere imgs auf der webseite hab muss das irgentwie auf ein bestimmtes img tag angewannt werden !
Hoff mir kann jemand helfen !
mfg
psd -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Dafür brauchst du kein AJAX.
Im OnLoad-Händler vom body-Tag packst du die Initialisierung
img = new Array ("bild1.jpg", "bild2.jpg", "nackt.jpg", "bild4.jpg"); imgIndex = 0; window.setInterval("nextImage()", 5000);
Und hier dann die Routine, die alle 5 sec aufgerufen wird.
function nextImage () { imgIndex = (imgIndex + 1) % 4; document.getElementById ("dieIDvomDivWoDieBilderReinsollen").innerHTML = '<img src="' + img [imgIndex] + '">'; }
Beitrag zuletzt geändert: 28.10.2009 13:26:07 von census -
das ist php oder ?? wie geht den nder ganze code ?? denn ich kann leider noch kein php!
-
psd schrieb:
das ist php oder ?? wie geht den nder ganze code ?? denn ich kann leider noch kein php!
Nein, das ist glaube ich Javascript.
VG Tom
Beitrag zuletzt geändert: 28.10.2009 14:01:50 von tom-moeller -
tom-moeller schrieb:
psd schrieb:
das ist php oder ?? wie geht den nder ganze code ?? denn ich kann leider noch kein php!
Nein, das ist glaube ich Javascript.
VG Tom
und wie lautet dann er komplette code ??
oder muss ich einfach nur noch <script ..... dafür haun ?? ... ich tests mal -
Verschoben in den HTML und JS Bereich.
Übrigens: Etwas mehr Eigeninitiative bitte, psd. Mir ist aufgefallen, dass du anfängst nach dem Prinzip "Ich geb' euch die Aufgabe, ihr macht mir 'ne Seite" vorzugehen. Der Code ist selbsterklärend. Ein <script type="text/javascript"> 'rum, die Bilder-URLs ins Array, das "% 4" durch die Anzahl der Bilder ersetzen und beim document.getElementById() die ID des imgs einfügen. -
ich habe hier noch einen kleinen php-Schnipsel:
<?php $files = array(); $folder = './'; $handle = opendir($folder); $exts = explode(' ','jpg JPG'); while (false !== ($file = readdir($handle))) { foreach($exts as $ext) { // for each extension check the extension if (preg_match('/\.'.$ext.'$/i', $file, $test)) { // faster than ereg, case insensitive $files[] = $file; // it's good } } } closedir($handle); // We're not using it anymore $rand = array_rand($files); header('Location: '.$folder.$files[$rand]); // Voila! ?>
Du brauchst:
- ein Verzeichnis mit ein paar Bildern
- dort sollte auch das Script gespeichert sein
einfach statt dem Namen des Bildes den Namen dieses Scriptes einsetzen.
z.B. statt <img src="/deinVerz/wasser1.jpg"> schreibst Du <img src="/deinVerz/deinScript.php".
Bild wird aber nur bei einem Reload der Seite gewechselt
Grüße, Klaus -
also
1) ich bin grade dabei php und js / ajax zu lernen !
Da ist das problem das die meisten tutorials / HowTo´s mir nur rechen aufgaben oder HELLO WORLD ausspucken und ich persöhnlich ncihts damit anfangen kann !
ausdem grund frag ich nach codes die ich mir dann in ruhe durchlesen kann und nach den funktionnen gogglen kann ! ich denke das ist Eigeninitiative. ich werd die codes wenn nötig und das glaub umbaun sobald das wissen da ist und wenns nötig ist !
2) danke allen für die hilfe. Werd das ganze jetzt mal austesten und dann bescheid geben ob alles klappt
mfg
psd
//edit
also sorry aber funktioniert noch nciht hab eigentlich alles ausprobiert
hier mal den code
<script type="text/javascript"> function nextImage () { imgIndex = (imgIndex + 1) % 10; document.getElementById ("round").innerHTML = '<img src="' + img [imgIndex] + '">'; } </script> </head> <body onload="img = new Array ("pix/01.png", "pix/02.png", "pix/03.png", "pix/04.png", "pix/05.png", "pix/06.png", "pix/07.png", "pix/08.png", "pix/09.png", "pix/10.png",); imgIndex = 0; window.setInterval("nextImage()", 3000);" >
hier der div
<div id="himgr" class="floatr" ><img id="round" src="pix/00.png"></div>
Beitrag zuletzt geändert: 28.10.2009 14:55:05 von psd -
document.getElementById("round").innerHTML = '<img src="'+img[imgIndex]+'">';
Hier sprichst du das Bild an, nicht das Div-Element.
Entweder:
document.getElementById("himgr").innerHTML = '<img src="'+img[imgIndex]+'">';
oder:
document.getElementById("round").src = img[imgIndex];
Gruß,
dex (qap2-Team)
Edit:
img = new Array ("pix/01.png", "pix/02.png", "pix/03.png", "pix/04.png", "pix/05.png", "pix/06.png", "pix/07.png", "pix/08.png", "pix/09.png", "pix/10.png",);
Das Komma am Ende muss weg!
Beitrag zuletzt geändert: 28.10.2009 15:13:01 von qap2 -
Falsche ID, nicht round, sondern himgr.
... <script type="text/javascript"> function nextImage () { imgIndex = (imgIndex + 1) % 10; document.getElementById ("himgr").innerHTML = '<img src="' + img [imgIndex] + '">'; } function init () { img = new Array ("pix/01.png", "pix/02.png", "pix/03.png", "pix/04.png", "pix/05.png", "pix/06.png", "pix/07.png", "pix/08.png", "pix/09.png", "pix/10.png",); imgIndex = 0; window.setInterval ("nextImage()", 3000); } </script> </head> <body onload="javascript:init()" > ... -
census schrieb:
Falsche ID, nicht round, sondern himgr.
geht auch nciht und firebug spuckt nichts aus
die bilder sind unter root im ordner pix kann da an der url was falsch sein ?? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
