[JavaScript] Brauche Hilfe, Slideshow

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Stegaa, 6. November 2008 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 6. November 2008
    Brauche Hilfe, Slideshow

    Also ich habe ein Script im Netz gefunden,welches Automatisch ein Bild per Fade In und Fade Out darstellt. Allerdings rutscht das Bild während des Wechsels ganz kurz nach unten ab und erscheint erst dann auf der gewünschten Position. Hier mal der Quelltext, kann mir jemand den Fehler zeigen?


    HTML:

    Code:
     <div style="float:right">
 <div id="imageContainer">
 <img style="display: block; opacity: 0.95;" 
 src="images/grill_1.jpg" />
 <img src="images/grill_2.jpg" />
 </div>
</div>

    CSS:

    Code:
    #imageContainer img { display:none; 
 
 opacity: -0.01; }
    Javascript:

    Code:
    window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false,interval=5000;

function so_init() {
 if(!d.getElementById || !d.createElement)return;
 
 /*css = d.createElement("link");
 css.setAttribute("href","js/xfade2.css");
 css.setAttribute("rel","stylesheet");
 css.setAttribute("type","text/css");
 d.getElementsByTagName("head")[0].appendChild(css);*/
 
 imgs = d.getElementById("imageContainer").getElementsByTagName("img");
 for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
 imgs[0].style.display = "block";
 imgs[0].xOpacity = .99;
 
 setTimeout(so_xfade,interval);
}

function so_xfade() {
 cOpacity = imgs[current].xOpacity;
 nIndex = imgs[current+1]?current+1:0;
 nOpacity = imgs[nIndex].xOpacity;
 
 cOpacity-=.05; 
 nOpacity+=.05;
 
 imgs[nIndex].style.display = "block";
 imgs[current].xOpacity = cOpacity;
 imgs[nIndex].xOpacity = nOpacity;
 
 setOpacity(imgs[current]); 
 setOpacity(imgs[nIndex]);
 
 if(cOpacity<=0) {
 imgs[current].style.display = "none";
 current = nIndex;
 setTimeout(so_xfade,interval);
 } else {
 setTimeout(so_xfade,50);
 }
 
 function setOpacity(obj) {
 if(obj.xOpacity>.99) {
 obj.xOpacity = .99;
 return;
 }
 obj.style.opacity = obj.xOpacity;
 obj.style.MozOpacity = obj.xOpacity;
 obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
 }
 
}
    Danke schonmal, bin am verzweifeln
     
  3. 6. November 2008
    AW: Brauche Hilfe, Slideshow

    Ein Tipp: benutz die JS-Bibliothek JQuery . Dort kannst du mit einfachen Funktionen fadeOut's oder fadeIn's durchführen - kompatibel mit allen (?) Browsern und ohne verrutschen.
     
  4. 6. November 2008
    AW: Brauche Hilfe, Slideshow

    Hat irgendwie nichts mit den Browsern zutun, denn es tritt bei jedem Browser immer das Selbe auf.
     
  5. 6. November 2008
    AW: Brauche Hilfe, Slideshow

    Das Fragezeichen war nicht darauf bezogen, dass dein Script nicht browserkompatibel ist, sondern ich mir bei JQuery nicht ganz sicher bin - aber mit FF und IE sollte es auf jeden Fall gehen. Und in der Bilbiothek hast du noch viele andere praktische JS-/AJAX-/XML-Funktionen implementiert.
     
  6. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.