Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] bildrotation, fadein/out ersetzung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] bildrotation, fadein/out ersetzung

    Ich will ein Bild alle x minuten ersetzen lassen durch ein zufälliges anderes.
    Zurzeit ruf ich das ganze zum testen noch per linkKlick auf statt mit interval ect.

    Aber leider faded das nicht so wie ich möchte.

    Das script ruft eine php datei auf, welche als antwort den Link zu einem zufälligen Bild schickt. (das klappt) dann soll das Bild schonmal vorgeladen werden, damit es dann sofort vorhanden ist. (hier hab ich ein kleines script im netz gefunden)
    Sobald das fertig ist, soll das alte bild weggefaded, und das neue reingefaded werden.
    Und hier hängts. Statt zu faden, wird das Bild einfach ersetzt.

    Hier mal mein Script:
    Code:
    <script type="text/javascript">
            var xmlhttp;
            var load_img;
            var timerid;
            function preloadImg() {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    imgpath = xmlhttp.responseText;
                    load_img = new Image();
                    load_img.src = imgpath;
                    timerid = setInterval("replace_img()", 2000);
                }
            }
            function replace_img(){
                if (load_img.complete) {
                    clearInterval(timerid);
                    delete(timerid);
                    img_fadeout(load_img.src);
                }
            }
            function img_fadeout(img) {
                for(var x=9; x>=0; x--){
                    document.getElementById("gallery_rotate").style.filter = "alpha(opacity=" + x + "0)";
                    document.getElementById("gallery_rotate").style.MozOpacity = "0." + x;
                }
                img_fadein(img);
            }
            function img_fadein(img) {
                document.getElementById("gallery_rotate").src = img;
                for(var x=0; x<=10; x++){
                    if(x != 10) {
                        document.getElementById("gallery_rotate").style.filter = "alpha(opacity=" + x + "0)";
                        document.getElementById("gallery_rotate").style.MozOpacity = "0." + x;
                    }
                    else {
                        document.getElementById("gallery_rotate").style.filter = "alpha(opacity=100)";
                        document.getElementById("gallery_rotate").style.MozOpacity = "1.0";
                    }
                }
            }
            function getRandImg() {
                var nocache = Math.random();
                xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", '/0.2/randpicture.php?para=' + nocache, true);
                xmlhttp.onreadystatechange = preloadImg;
                xmlhttp.send(null);
            }
        </script>
    Das bild ist auf der seite so definiert:
    Code:
    <div id="img_rot">
            <img id="gallery_rotate" height="163" width="154" src="img/1.jpg" style="filter:alpha(opacity=80);-moz-opacity:0.8"/>
    </div>
    Und aufgerufen wird das ganze damit

    Code:
     <a href="javascript:getRandImg();">test</a>
    Wie bekomm ich jetzt einen schönen fade effekt hin? Ich versuche ja das opacity runter- & raufzuscalieren, aber anscheinend klappt das nicht.

  • #2
    Ok Fehler war, dass das ja sofort hintereinander hoch und runtergezählt wurde, wenn man das mit intervallen löst klappts

    Code:
    function fade(direction) {
                theobject = document.getElementById("gallery_rotate");
                if(direction == 0)
                    highlighting = setInterval("decrease(theobject)",50);
                else {
                    clearInterval(highlighting);
                    highlighting = setInterval("increase(theobject)",50);
                }
            }
            function decrease(img) {
    
                if (img.style.MozOpacity > 0)
                    img.style.MozOpacity = parseFloat(img.style.MozOpacity) - 0.1;
                else if (img.style.MozOpacity == 0) {
                     img.src = load_img.src;
                     fade(1);
                }
                else if (img.filters && img.filters.alpha.opacity > 0)
                    img.filters.alpha.opacity -= 10;
                else if (img.filters && img.filters.alpha.opacity == 0) {
                    img.src = load_img.src;
                    fade(1);
                }
                else if (window.highlighting)
                    clearInterval(highlighting);
            }
            function increase(img) {
                if (img.style.MozOpacity < 1)
                    img.style.MozOpacity = parseFloat(img.style.MozOpacity) + 0.1;
                else if (img.filters && img.filters.alpha.opacity < 100)
                    img.filters.alpha.opacity += 10;
                else if (window.highlighting)
                    clearInterval(highlighting);
            }

    Kommentar

    Lädt...
    X