Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 23

Thema: slideshow mit 3 bildern gleichzeitig

  1. #1
    HTML Newbie
    Registriert seit
    12.09.2007
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard slideshow mit 3 bildern gleichzeitig

    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&#40;"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"&#41;;
    var loadp = new Array&#40;&#41;;
    var pos = 0;
    function init&#40;&#41; &#123;
      for&#40;i=0;i<bilder.length;i++&#41; &#123;
        loadp&#91;i&#93; = new Object&#40;&#41;;
        loadp&#91;i&#93; = new Image&#40;&#41;;
        loadp&#91;i&#93;.src = bilder&#91;i&#93;;
      &#125;
      testload&#40;&#41;;
    &#125;
    function testload&#40;&#41; &#123;
      gonow = true;
      for&#40;i=0;i<bilder.length;i++&#41; &#123;
        if&#40;!loadp&#91;i&#93;.complete&#41;&#123;
          gonow = false;
          window.setTimeout&#40;"testload&#40;&#41;",1000&#41;;
          break;
        &#125;
      &#125;
      if&#40;gonow&#41; &#123;
        document.getElementById&#40;'wechsel'&#41;.innerHTML = '[img][/img][img][/img][img][/img]';
        changepic&#40;&#41;;
      &#125;
    &#125;
    function changepic&#40;&#41; &#123;
      document.getElementById&#40;'img1'&#41;.src = bilder&#91;pos&#93;;
      document.getElementById&#40;'img2'&#41;.src = &#40;pos+1 > bilder.length&#41; ? bilder&#91;0&#93; &#58; bilder&#91;pos+1&#93;;
      document.getElementById&#40;'img3'&#41;.src = &#40;pos+2 < bilder.length&#41; ? bilder&#91;pos+2&#93; &#58; &#40;pos+1 > bilder.length&#41; ? bilder&#91;1&#93; &#58; bilder&#91;0&#93;;
    &#125;
    function nextpic&#40;&#41; &#123;
      pos = &#40;pos+1 == bilder.length&#41; ? 0 &#58; pos+1;
      changepic&#40;&#41;;
    &#125;
    function prevpic&#40;&#41; &#123;
      pos = &#40;pos-1 < 0&#41; ? bilder.length-1 &#58; pos-1;
      changepic&#40;&#41;;
    //-->
    </script>
    </head>
    
    <body>
    <div id="wechsel" style="margin-top&#58;84px; margin-left&#58;306px; position&#58;absolute; width&#58;402px; height&#58;310px">Laden...</div>
        &lt;-
        -&gt;
    </body>
    kann mir jemand sagen was da falsch läuft?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    HTML Newbie
    Themenstarter

    Registriert seit
    12.09.2007
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

  3. #3
    Forum Guru
    Registriert seit
    28.12.2004
    Ort
    Ringgenberg(bei Interlaken) / Schweiz
    Beiträge
    4.787
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

  4. #4
    Gast

    Standard

    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

  5. #5
    Forum Guru
    Registriert seit
    28.12.2004
    Ort
    Ringgenberg(bei Interlaken) / Schweiz
    Beiträge
    4.787
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    ist zwar ungetestet, sollte aber laufen:
    Code:
    <head>
    <script language="JavaScript">
    <!--
    window.onload = init;
    var bilder = new Array&#40;"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"&#41;;
    var loadp  = new Array&#40;&#41;;
    var pos    = 0;
    var iv 	   = NULL;
    
    function init&#40;&#41; 
    &#123;
      for&#40;i=0;i<bilder.length;i++&#41; 
      &#123;
        loadp&#91;i&#93; = new Image&#40;&#41;;
        loadp&#91;i&#93;.src = bilder&#91;i&#93;;
      &#125;
      
      document.getElementById&#40;'wechsel'&#41;.innerHTML = '[img][/img][img][/img][img][/img]';
      
      iv = window.setInterval&#40;"nextpic&#40;&#41;", 1000&#41;;
    &#125;
    
    function changepic&#40;&#41;
    &#123;
      /* Hauptposition koregieren */
      if &#40;pos>= bilder.length&#41;
       pos = 0;
       
      if &#40;pos<bilder.length&#41;
       pos = bilder.length-1;
       
      var poa = pos-1;
      var pob = pos+1;
      
      /* Nebenposition A koregieren */
      if &#40;poa>= bilder.length&#41;
       poa = 0;
       
      if &#40;poa<bilder.length&#41;
       poa = bilder.length-1;
       
      /* Nebenposition B koregieren */
      if &#40;pob>= bilder.length&#41;
       pob = 0;
       
      if &#40;pob<bilder.length&#41;
       pob = bilder.length-1;
    
    
      document.getElementById&#40;'img1'&#41;.src = bilder&#91;poa&#93;;
      document.getElementById&#40;'img2'&#41;.src = bilder&#91;pos&#93;;
      document.getElementById&#40;'img3'&#41;.src = bilder&#91;pob&#93;;
    &#125;
    
    
    function nextpic&#40;&#41; 
    &#123;
      pos = pos+1;
      changepic&#40;&#41;;
    &#125;
    
    function prevpic&#40;&#41; 
    &#123;
      pos = pos-1;
      changepic&#40;&#41;;
    &#125;
    //-->
    </script>
    </head>
    
    <body>
    <div id="wechsel" style="margin-top&#58;84px; margin-left&#58;306px; position&#58;absolute; width&#58;402px; height&#58;310px">Laden...</div>
        &lt;-
        -&gt;
    </body>

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

  6. #6
    Gast

    Standard

    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

  7. #7
    Forum Guru
    Registriert seit
    28.12.2004
    Ort
    Ringgenberg(bei Interlaken) / Schweiz
    Beiträge
    4.787
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    12.09.2007
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  9. #9
    Forum Guru
    Registriert seit
    28.12.2004
    Ort
    Ringgenberg(bei Interlaken) / Schweiz
    Beiträge
    4.787
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Code:
    <html>
    <head>
    <script language="JavaScript">
    <!--
    window.onload = init;
    var bilder = new Array&#40;"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"&#41;;
    var loadp  = new Array&#40;&#41;;
    var pos    = 0;
    var iv       = null;
    
    function init&#40;&#41;
    &#123;
      for&#40;i=0;i<bilder.length;i++&#41;
      &#123;
        loadp&#91;i&#93; = new Image&#40;&#41;;
        loadp&#91;i&#93;.src = bilder&#91;i&#93;;
      &#125;
     
      document.getElementById&#40;'wechsel'&#41;.innerHTML = '[img][/img][img][/img][img][/img]';
     
      nextpic&#40;&#41;;
      iv = window.setInterval&#40;"nextpic&#40;&#41;", 1000Q&#41;;
    &#125;
    
    function changepic&#40;&#41;
    &#123;
      /* Hauptposition koregieren */
      pos = &#40;pos>= bilder.length&#41;?0&#58;&#40;pos<0&#41;?&#40;bilder.length-1&#41;&#58;pos;
       
      var poa = pos-1;
      var pob = pos+1;
     
      /* Nebenposition A koregieren */
      poa = &#40;poa>= bilder.length&#41;?0&#58;&#40;poa<0&#41;?&#40;bilder.length-1&#41;&#58;poa;
    
      /* Nebenposition B koregieren */
      pob = &#40;pob>= bilder.length&#41;?0&#58;&#40;pob<0&#41;?&#40;bilder.length-1&#41;&#58;pob;
    
      document.getElementById&#40;'img1'&#41;.src = bilder&#91;poa&#93;;
      document.getElementById&#40;'img2'&#41;.src = bilder&#91;pos&#93;;
      document.getElementById&#40;'img3'&#41;.src = bilder&#91;pob&#93;;
    &#125;
    
    
    function nextpic&#40;&#41;
    &#123;
      pos = pos+1;
      changepic&#40;&#41;;
    &#125;
    
    function prevpic&#40;&#41;
    &#123;
      pos = pos-1;
      changepic&#40;&#41;;
    &#125;
    //-->
    </script>
    </head>
    
    <body>
    <div id="wechsel" style="margin-top&#58;84px; margin-left&#58;306px; position&#58;absolute; width&#58;402px; height&#58;310px">Laden...</div>
        &lt;-
        -&gt;
    </body>
    </html>

  10. #10
    Gast

    Standard

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

Ähnliche Themen

  1. Slideshow
    Von nhl-hockey-king im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 04.05.2007, 10:45
  2. slideshow erstellen
    Von wernerdeluxe im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 4
    Letzter Beitrag: 05.06.2006, 19:53
  3. Slideshow gesucht!
    Von Ivanman im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 15.12.2005, 14:58
  4. Slideshow mit einzelnen JPG-Bildern!!!
    Von im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 09.07.2005, 01:09
  5. Slideshow im Iframe!
    Von Udo Scharecke im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 06.05.2005, 13:29

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •