slideshow mit 3 bildern gleichzeitig

eichi89

hallo,
und zwar möcht ich einer art slideshow in der immer 3bilder gleichzeitig zu sehen sind, wenn man auf den entsprechenden button clickt sollt die bilderreihe 1bild nach rechts/links weiterrücken

hier mein bisheriges script welches aber bei mir irgendwie nicht funzioniert

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][/img][img][/img][img][/img]';
    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>
    [url='javascript:prevpic();']&lt;-[/url]
    [url='javascript:nextpic();']-&gt;[/url]
</body>

Alles anzeigen

kann mir jemand sagen was da falsch läuft?

eichi89

wenn jemand eine ander umsetzung weiß kann er sie auch gerne posten

GreenRover

erläuter mal wie sich die 3 bilder genau verhalten sollen

hab erstmal das script korrigiert, es fehlte das "w" bei window am anfang und die "}" am ende.
gedacht ist eine slideshow in der immer nur 3 Bilder horizontal nebeneinander zu sehen sind. es gibt zwei buttons (einen nach rechts/vorwerts u. einen nach links/rückwerts), wenn man nun den für "vorwerts" anklickt soll das linke bild verschwinden, das was erst in der mitte war nach links rücken, der rechte in die mitte rücken und rechts ein neues erscheinen, wenn also erst die bilder 1,2,3 zu sehen waren, sollen anschließend 2,3,4 erscheinen. beim klicken auf den "rückwerts"-button entsprechend in die andere richtung.
im script ist jetz noch das problem, dass jedes 2. bild doppelt dargestellt wird, und dass ich nicht weis wie man die bilder nebeneinander u in bestimmten größen darstellen lassen kann, zudem wird beim ersten aufruf der seite das 3.bild nicht gezeigt.
also, wenn jemand mit dem script etwas anfanegen kann oder eine ander umsetzung hinbekommt, wär ich seeehr dankbar

GreenRover

ist zwar ungetestet, sollte aber laufen:

Code

<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;
var iv 	   = NULL;


function init() 
{
  for(i=0;i<bilder.length;i++) 
  {
    loadp[i] = new Image();
    loadp[i].src = bilder[i];
  }

  document.getElementById('wechsel').innerHTML = '[img][/img][img][/img][img][/img]';

  iv = window.setInterval("nextpic()", 1000);
}


function changepic()
{
  /* Hauptposition koregieren */
  if (pos>= bilder.length)
   pos = 0;

  if (pos<bilder.length)
   pos = bilder.length-1;

  var poa = pos-1;
  var pob = pos+1;

  /* Nebenposition A koregieren */
  if (poa>= bilder.length)
   poa = 0;

  if (poa<bilder.length)
   poa = bilder.length-1;

  /* Nebenposition B koregieren */
  if (pob>= bilder.length)
   pob = 0;

  if (pob<bilder.length)
   pob = bilder.length-1;




  document.getElementById('img1').src = bilder[poa];
  document.getElementById('img2').src = bilder[pos];
  document.getElementById('img3').src = bilder[pob];
}




function nextpic() 
{
  pos = pos+1;
  changepic();
}


function prevpic() 
{
  pos = pos-1;
  changepic();
}
//-->
</script>
</head>


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

Alles anzeigen

wenn du willst und kannst, lassen sich die if s im changepic noch auf 3 zeilen verkürzen.

danke erstmal für deine hilfe, sorry, aber bei mir wird immer nur 3x das 17. bild angezeigt, seh da echt nich durch. Ist bestimmt keine absicht das im array bei jedem dritten bild das".jpg" fehlt, oder?
hoffe du kannst mir nochmal helfen

GreenRover

das mit der array hast du doch so angeliefert...
und gib mal ein link zum beispiel...

eichi89

oh sry hat ich ganz übersehen. hab die html und die bilder [url:'http://www.siteupload.de/dl.php?fid=462316']hier[/url] mal hochgeladen

GreenRover

HTML

<html>
<head>
<script language="JavaScript">
<!--
window.onload = init;
var bilder = new Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg","07.jpg","08.jpg","09.jpg","10.jpg","11.jpg","12.jpg","13.jpg","14.jpg","15.jpg","16.jpg","17.jpg");
var loadp  = new Array();
var pos    = 0;
var iv       = null;


function init()
{
  for(i=0;i<bilder.length;i++)
  {
    loadp[i] = new Image();
    loadp[i].src = bilder[i];
  }
 
  document.getElementById('wechsel').innerHTML = '[img][/img][img][/img][img][/img]';
 
  nextpic();
  iv = window.setInterval("nextpic()", 1000Q);
}


function changepic()
{
  /* Hauptposition koregieren */
  pos = (pos>= bilder.length)?0:(pos<0)?(bilder.length-1):pos;

  var poa = pos-1;
  var pob = pos+1;
 
  /* Nebenposition A koregieren */
  poa = (poa>= bilder.length)?0:(poa<0)?(bilder.length-1):poa;


  /* Nebenposition B koregieren */
  pob = (pob>= bilder.length)?0:(pob<0)?(bilder.length-1):pob;


  document.getElementById('img1').src = bilder[poa];
  document.getElementById('img2').src = bilder[pos];
  document.getElementById('img3').src = bilder[pob];
}




function nextpic()
{
  pos = pos+1;
  changepic();
}


function prevpic()
{
  pos = pos-1;
  changepic();
}
//-->
</script>
</head>


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

Alles anzeigen

danke, jetz funktioniert es (hatte sich nur ein "Q" hinter die "1000" im interval geschlichen, danke für deine hilfe

eichi89

kannst du mir noch sagen, wie man die positionen korigieren könnte?

GreenRover

in wie fern?

die bilder sollen horizontal nebeneinader liegen, also müsste es eine x und y position und eine art width und heigth geben, leider hab ich keinen schimmer, wie man das im js enbaut

also ich mein für jede der 3 positionen eine eigene x- u. y-position und breite und höhe

GreenRover

und wiso machst du nicht einfach eine tabelle mit 3 zellen ?!?!

eichi89

danke, hat anscheinend n kleiner schups gefehlt, jetz stimmt alles

eichi89

hab nochmal eine frage zum script:
und zwar will ich das mittlerere bild als link zu einer jeweiligen .html seite nutzen. der link sieht bis jetzt so aus:

document.getElementById('bild2').innerHTML = 'http://img_gr/bewerbung/0';

hab versucht als variable (an stelle der ???) "pos" zu nutzen, die jedoch an dieser stelle "0" ist. Wie müüste man das script umschreiben damit soetwas möglich ist?

ich seh da noch immer nich wirklich durch, wär dir also echt dankbar wenn du mir nochmal helfen könntest

GreenRover

must am einfachsten dem <a auch eien id geben und nur das href ersetzen.. wird ja bei den bildern auch nur das src erssetzt.

eichi89

versteh das noch nicht ganz, meinst du das so?

Code

document.getElementById('bild2').innerHTML = '[url=''][img][/img][/url]';

GreenRover

du kannst nicht 2mal die selbe id vergeben

und überleg mal wie oft das innerHTMl ausgeführt wird.

Tags