• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

dynamischer bilderwechsel

Status
Für weitere Antworten geschlossen.
eichi89

eichi89

Neues Mitglied
hallo,

ich möchte auf meiner seite eine art slideschow anlegen, die wie folgt aufgebaut sein soll: es sind immer 3 bilder zu sehen, es gibt 2 divs (als buttons) zum steuern, wenn man einen anklickt soll die bilderreihe 1 bild weiter-/zurückspringen (quasi das bild was in der mitte war ist nun links). es gibt insgesammt 17 bilder wenn das 17te in der mitte ist soll das erste wieder rechts erscheinen ... also quasi endlos laufend. hab mich durch verschiedenste beiträge geklickt und nur eine lösung gefunden, wie dies beim ersten klick und nur mit dem mittelsten bild läuft. hier der ansatz:

<head>
<base target="_self">
<script language="JavaScript">
<!--
p02=new Image(); p2.src="02.jpg";
function change(p02,pob)
{
window.document.images[p02].src = pob.src;
}
//-->
</script>
</head>
<body>
...
<a href="#" onclick="change(1,p02)"><div.../div></a>

ich weis, dass man da jetz irgendwie mit variabelen und schleifen weitermachen müsste ... hab aber wirklich wenig ahnung von und bis jetz wenig erfolg. würde mich freuen, wenn sich jemand dem annehmen könnte oder mir n tipp geben, wo man so eine umsetzung findet (hab schon fast 2h danach gegoogled u in andern foren gesucht)

lg eichi89
 
probier es mal damit
JS
Code: 
window.onload = init;
var bilder = new Array("bild1.jpg","bild2.jpg","bild3","bild4.jpg");
var loadp = new Array();
var pos = 0;
function init() {
  for(i=0;i<bilder.length;i++) {
    loadp[i] = new Object();
    loadp[i] = new Image();
    loadp[i].src = bilder[i];
  }
  testload();
}
function testload() {
  gonow = true;
  for(i=0;i<bilder.length;i++) {
    if(!loadp[i].complete){
      gonow = false;
      window.setTimeout("testload()",1000);
      break;
    }
  }
  if(gonow) {
    document.getElementById('wechsel').innerHTML = '<img src="" id="img1" /><img src="" id="img2" /><img src="" id="img3" />';
    changepic();
  }
}
function changepic() {
  document.getElementById('img1').src = bilder[pos];
  document.getElementById('img2').src = (pos+1 > bilder.length) ? bilder[0] : bilder[pos+1];
  document.getElementById('img3').src = (pos+2 < bilder.length) ? bilder[pos+2] : (pos+1 > bilder.length) ? bilder[1] : bilder[0];
}
function nextpic() {
  pos = (pos+1 == bilder.length) ? 0 : pos+1;
  changepic();
}
function prevpic() {
  pos = (pos-1 < 0) ? bilder.length-1 : pos-1;
  changepic();
}

der html code sieht zum beispiel so aus
Code: 
<div id="wechsel">Laden...</div>
<a href="javascript:prevpic();">&lt;-</a>
<a href="javascript:nextpic();">-&gt;</a>
 
Zuletzt bearbeitet:
danke erstmal für deine schnelle hilfe.
hab versucht es einzubauen, mir ist aber noch nicht klar wie und wo die bilder widergegeben werden sollen. hab das array, die stelle bei "document.getElementById" und die stelle bei "function changepic() {" auf meine bilderanzahl angepasst, nur ist mir bei letzterem noch nicht klar wie genau "[pos+...]" verändert werden muss.

lg eichi89
 
das muss gar nicht geändert werden.
Das einzige was du anpassen musst ist das array bilder
Dann brauchst du noch ein span, div oder wie auch immer mit der id "wechsel".

Den rest machts automatisch
 
sorry, aber bei mir klappts immer noch nicht. kannst du dirs nochmal ansehen, was mach ich nur falsch?

Code: 
<head>
<script language="JavaScript">
<!--
indow.onload = init;
var bilder = new Array("01.jpg","02.jpg","03","04.jpg","05.jpg","06","07.jpg","08.jpg","09","10.jpg","11.jpg","12","13.jpg","14.jpg","15","16.jpg","17.jpg");
var loadp = new Array();
var pos = 0;
function init() {
  for(i=0;i<bilder.length;i++) {
    loadp[i] = new Object();
    loadp[i] = new Image();
    loadp[i].src = bilder[i];
  }
  testload();
}
function testload() {
  gonow = true;
  for(i=0;i<bilder.length;i++) {
    if(!loadp[i].complete){
      gonow = false;
      window.setTimeout("testload()",1000);
      break;
    }
  }
  if(gonow) {
    document.getElementById('wechsel').innerHTML = '<img src="" id="img1" /><img src="" id="img2" /><img src="" id="img3" />';
    changepic();
  }
}
function changepic() {
  document.getElementById('img1').src = bilder[pos];
  document.getElementById('img2').src = (pos+1 > bilder.length) ? bilder[0] : bilder[pos+1];
  document.getElementById('img3').src = (pos+2 < bilder.length) ? bilder[pos+2] : (pos+1 > bilder.length) ? bilder[1] : bilder[0];
}
function nextpic() {
  pos = (pos+1 == bilder.length) ? 0 : pos+1;
  changepic();
}
function prevpic() {
  pos = (pos-1 < 0) ? bilder.length-1 : pos-1;
  changepic();
//-->
</script>
</head>

<body>
<div id="wechsel" style="margin-top:84px; margin-left:306px; position:absolute; width:402px; height:310px">Laden...</div>
    <a href="javascript:prevpic();">&lt;-</a>
    <a href="javascript:nextpic();">-&gt;</a>
</body>

ps: wie richtest du die 3 bilder im script eigentlich nebeneinander aus?
 
du hattest beim kopieren des js codes das erste und letzte zeichen (w am anfang } am ende) iwie nicht mitkopiert oder so

Code: 
<html>
<head>
<script language="JavaScript">
<!--
window.onload = init;
var bilder = new Array("01.jpg","02.jpg","03","04.jpg","05.jpg","06","07.jpg","08.jpg","09","10.jpg","11.jpg","12","13.jpg","14.jpg","15","16.jpg","17.jpg");
var loadp = new Array();
var pos = 0;
function init() {
  for(i=0;i<bilder.length;i++) {
    loadp[i] = new Object();
    loadp[i] = new Image();
    loadp[i].src = bilder[i];
  }
  testload();
}
function testload() {
  gonow = true;
  for(i=0;i<bilder.length;i++) {
    if(!loadp[i].complete){
      gonow = false;
      window.setTimeout("testload()",1000);
      break;
    }
  }
  if(gonow) {
    document.getElementById('wechsel').innerHTML = '<img src="" id="img1" /><img src="" id="img2" /><img src="" id="img3" />';
    changepic();
  }
}
function changepic() {
  document.getElementById('img1').src = bilder[pos];
  document.getElementById('img2').src = (pos+1 > bilder.length) ? bilder[0] : bilder[pos+1];
  document.getElementById('img3').src = (pos+2 < bilder.length) ? bilder[pos+2] : (pos+1 > bilder.length) ? bilder[1] : bilder[0];
}
function nextpic() {
  pos = (pos+1 == bilder.length) ? 0 : pos+1;
  changepic();
}
function prevpic() {
  pos = (pos-1 < 0) ? bilder.length-1 : pos-1;
  changepic();
}
//-->
</script>
</head>

<body>
<div id="wechsel" style="margin-top:84px; margin-left:306px; position:absolute; width:402px; height:310px">Laden...</div>
    <a href="javascript:prevpic();">&lt;-</a>
    <a href="javascript:nextpic();">-&gt;</a>
</body>
</html>
 
danke, soetwas dummes, jetz zeigt's die bilder an ... aber bei mir wird jedes 2.bild doppelt dargestellt und beim ersten aufrufen der seite wird das bild 3 (also 03.jpg) nicht gefunden, beim durchklicken jedoch schon.
zudem werden die bilder im IE nicht geladen und die fehlermeldung "'documen.getElementById(...)' ist Null oder kein Objekt" warum kann der die bilder nicht laden?

danke für deine Hilfe
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben