Antworten auf deine Fragen:
Neues Thema erstellen

Überblendeffekt mit Java

waldmannvonritter

waldmannvonritter

Nicht mehr ganz neu hier

Hi, schreibe grad einen Überblndeffekt für bilder in JavaScript.

Problem:
Ich würde gern eine schleife einbauen das wenn das letzte Bild ausgelesen wurde es wieder von vorne beginnt.

Die schleife habe ich eingebaut und die funktioniert auch (da ich den wert in einem feld anzeigen lasse und daran sehe das der Zähler von vorne anfägt zu zählen).

Die eigentlich hürde sind die Bilder. Da ja schonmal alles geladen wurde, bleibt das letzte Bild bestehen und somit laufen darunter die ganzen bilder durch, was mann dann nicht sieht.

Vieleicht schreiben mir jetzt ein paar warum ich nicht einfach nen simplen jquery plugin benutze... das liegt daran das ich kein schnipsel gefunden habe indem die bilder stehen bleiben. Ich arbeite in meinem falle mit transparenten Bildern und die sich so schrittweise aufbauen. Ein gesammtbild besteht immer aus 3 Bildern. hier mal beispielaufbau ...

bild 1 -> Vollflächiges Bild
bild 2 -> transparentes Bild
bild 3 -> transparentes Bild
bild 4 -> Vollflächiges Bild
bild 5 -> transparentes Bild
bild 6 -> transparentes Bild
u.s.w.

hier der code:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Optislide</title>
<script type="text/javascript">
        function fade(step) {
            var imgs = document.getElementById("meinFader").getElementsByTagName("img");

            step = step || 0;

            imgs[counter].style.opacity = step/100;
            imgs[counter].style.filter = "alpha(opacity=" + step + ")"; 

            step = step + 2;

            if (step <= 100) {
                window.setTimeout(function () { fade(step); }, 1);
            } else {
                window.setTimeout(next, 100);
            }
        }

        function next() {
            var imgs = document.getElementById("meinFader").getElementsByTagName("img");

            if (typeof(counter) != "number") {
                counter = 0;
            }

            counter++;
            document.getElementById("feld").value=counter;

            if (counter < imgs.length) {
                fade();
           } 
            
            else {
                counter = 0;
                fade();
            }
            
        };
    </script>
<style type="text/css">
.next {
    position: absolute;
    top: 0;
    left: 0;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity: 0;
    opacity: 0;
}
#meinFader {
    position: relative;
}
</style>
</head>
<body bgcolor="#000000" onLoad="javascript:next()">
<p id="meinFader"> 
<img src="optipics/pic1.png" alt=""> 
<img src="optipics/pic2.png" alt="" class="next"> 
<img src="optipics/pic3.png" alt="" class="next"> 
<img src="optipics/pic4.png" alt="" class="next"> 
<img src="optipics/pic5.png" alt="" class="next"> 
<img src="optipics/pic6.png" alt="" class="next"> 
<img src="optipics/pic7.png" alt="" class="next"> 
<img src="optipics/pic8.png" alt="" class="next"> 
<img src="optipics/pic9.png" alt="" class="next"> 
<img src="optipics/pic10.png" alt="" class="next"> 
<img src="optipics/pic11.png" alt="" class="next"> 
<img src="optipics/pic12.png" alt="" class="next">
</p>
<input type="text" id="feld" size="100" />
</body>
</html>
ihr könnts ja mal testen. das ist der gesammte code. müsst halt nur bilder einsetzen.
Vileicht hat ja jemand nen tip wie das ganze von vorne abgespielt werden kann.

gruß waldmannvonritter
 
Zuletzt bearbeitet:

Myhar

Myhar

Hat es drauf

AW: Überblendeffekt mit Java

1. Du schreibst keinen Bildüberblendeffekt in Java sondern in JavaScript (Das sind 2 komplett verschiedene Dinge)

2. Formatiere deinen Code mithilfe der [ CODE ]-Funktion, dann kann man ihn sich mal anschauen.

L. G.
 
Myhar

Myhar

Hat es drauf

AW: Überblendeffekt mit Java

Ja, ist besser.
Ich würde mal versuchen, nachdem alle Bilder eingefadet wurden, diese wieder zu entfernen bevor du von neuem anfängst
Code: 
            else {
                //Hier mittels Funktion die Bilder wieder entfernen/ausblenden.
                counter = 0;
                fade();
            }

könnte hier vielleicht hilfreich sein?
Oder du setzt einfach die Transparenz wieder zurück von all deinen Bildern (natürlich ohne ausfaden)

L. G.
 
waldmannvonritter

waldmannvonritter

Nicht mehr ganz neu hier

AW: Überblendeffekt mit Java

Hab ez ne Lösung gefunden, aber ich bin gezwungen einen Link zu drücken um den Slide-Effekt zu Starten.
Vieleicht hat ja jemand ne Idee wie man das Automatisieren könnte. (sprich: wenn die Seite geladen wird).

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OptiSlideShow</title>
<script type="text/javascript">
        function Fader(einstellungen) {
            if (!einstellungen.id || !document.getElementById(einstellungen.id)
                || einstellungen.images.length < 2) {

                return new Boolean(false);
            }

            var i, original = document.getElementById(einstellungen.id);

            this.id = einstellungen.id;
            this.images = new Array();
            this.counter = 0;

            this.element = document.createElement("span");
            this.element.className = "fader";
            original.parentNode.replaceChild(this.element, original);

            for (i = 0; i < einstellungen.images.length; i++) {
                this.images[i] = document.createElement("img");
                this.images[i].src = einstellungen.images[i];
                this.images[i].alt = "Bild";

                if (i == 0) {
                    this.element.appendChild(this.images[i]);
                }
            }

            this.fade = function (step) {
                var fader = this, imgs = this.element.getElementsByTagName("img");

                step = step || 0;

                imgs[1].style.opacity = step/100;
                imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE?

                step = step + 2;

                if (step <= 100) {
                    window.setTimeout(function () { fader.fade(step); }, 1);
                } else {
                    imgs[1].className = "";
                    this.element.removeChild(imgs[0]);
                    window.setTimeout(function () { fader.next(); }, 2000);
                }
            };

            this.next = function () {
                this.counter = (this.counter < this.images.length -1) ? this.counter +1 : 0;

                this.element.appendChild(this.images[this.counter]);
                this.images[this.counter].className = "next";
                this.fade();
            };
        }

        function erstelleFader () {
            var einstellungen = {
                id: "slideshow",
                images: ["v4/images/opticom1.png", "v4/images/opticom2.png", "v4/images/opticom3.png", "v4/images/opticom4.png", "v4/images/opticom5.png", "v4/images/opticom6.png", "v4/images/opticom7.png", "v4/images/opticom8.png", "v4/images/opticom9.png", "v4/images/opticom10.png", "v4/images/opticom11.png", "v4/images/opticom12.png"]
            };

            if (!window.meine_slideshow) {
                window.meine_slideshow = new Fader(einstellungen);
            }
        }
    </script>
<style type="text/css">
.next {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter:alpha(opacity=0);
}
.fader {
    position: relative;
    display: inline-block;
}
.fader img {
    vertical-align: top;
}
</style>
</head>

<body onLoad="javascript:erstelleFader()">
<p><img src="v4/images/opticom1.png" alt="" id="slideshow"></p>
<a href="#" onclick="if (window.meine_slideshow) { meine_slideshow.next(); this.onclick = function () { return false; }; } return false;">starten</a>
</p>
</body>
</html>

gruß waldmannvonritter
 
Myhar

Myhar

Hat es drauf

AW: Überblendeffekt mit Java

Auch eine gute Idee, die Bilder dynamisch zu laden :)
Was spricht dagegen, den onclick vom <a> Tag in eine Funktion zu stecken und diese dann auszuführen?
Code: 
function startThis(){
if (window.meine_slideshow) { meine_slideshow.next(); this.onclick = function () { return false; }; } return false;"
}

window.onload=function(){
  startThis()
}
 
waldmannvonritter

waldmannvonritter

Nicht mehr ganz neu hier

AW: Überblendeffekt mit Java

Ha du wirst lachen :D hab ich auch grad gemacht :)

hier die endversion mit autostart :D

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>OptiSlideShow</title>
<script type="text/javascript">
        function Fader(einstellungen) {
            if (!einstellungen.id || !document.getElementById(einstellungen.id)
                || einstellungen.images.length < 2) {

                return new Boolean(false);
            }

            var i, original = document.getElementById(einstellungen.id);

            this.id = einstellungen.id;
            this.images = new Array();
            this.counter = 0;

            this.element = document.createElement("span");
            this.element.className = "fader";
            original.parentNode.replaceChild(this.element, original);

            for (i = 0; i < einstellungen.images.length; i++) {
                this.images[i] = document.createElement("img");
                this.images[i].src = einstellungen.images[i];
                this.images[i].alt = "Bild";

                if (i == 0) {
                    this.element.appendChild(this.images[i]);
                }
            }

            this.fade = function (step) {
                var fader = this, imgs = this.element.getElementsByTagName("img");

                step = step || 0;

                imgs[1].style.opacity = step/100;
                imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE?

                step = step + 2;

                if (step <= 100) {
                    window.setTimeout(function () { fader.fade(step); }, 1);
                } else {
                    imgs[1].className = "";
                    this.element.removeChild(imgs[0]);
                    window.setTimeout(function () { fader.next(); }, 2000);
                }
            };

            this.next = function () {
                this.counter = (this.counter < this.images.length -1) ? this.counter +1 : 0;

                this.element.appendChild(this.images[this.counter]);
                this.images[this.counter].className = "next";
                this.fade();
            };
        }

        function Preloader () {
            var einstellungen = {
                id: "slideshow",
                images: ["v4/images/opticom1.png", "v4/images/opticom2.png", "v4/images/opticom3.png", "v4/images/opticom4.png", "v4/images/opticom5.png", "v4/images/opticom6.png", "v4/images/opticom7.png", "v4/images/opticom8.png", "v4/images/opticom9.png", "v4/images/opticom10.png", "v4/images/opticom11.png", "v4/images/opticom12.png"]
            };

            if (!window.meine_slideshow) {
                window.meine_slideshow = new Fader(einstellungen);
            }
            meine_slideshow.next();
        }
    </script>
<style type="text/css">
.next {
    position: absolute;
    top: 0;
    left: 0;    
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // first!
    filter: alpha(opacity=0);
    opacity: 0;
}
.fader {
    position: relative;
    display: inline-block;
}
.fader img {
    vertical-align: top;
}
</style>
</head>

<body onLoad="javascript:Preloader()">
<p><img src="v4/images/opticom1.png" alt="" id="slideshow"></p>
</p>
</body>
</html>

viel Spaß damit wers haben mag :)

Gruß Waldmannvonritter
 
Zuletzt bearbeitet:
Myhar

Myhar

Hat es drauf

AW: Überblendeffekt mit Java

Sehr gut :)
Zwei kleine Anmerkungen/Optimierungsvorschläge noch von mir:
Erstens könntest du in deiner Preloader-Funktion das images-Array in einer Schleife befüllen, da sich der Bildpfad ja nur durch die Zahl am Ende unterscheidet (dann könnte man schnell die Anzahl der Bilder ändern, sofern das einmal gewünscht wäre)

Zweitens könnte man das onload vom <body> entfernen und es mit window.onload ( oder so ähnlich obwohl das wohl zu viel des Guten für das einfache Beispiel wäre) versuchen. Es ist nicht falsch, aber ich finde es 'besser', wenn das Javascript vom HTML Teil getrennt wird. Lagert man diese JS Funktionen in eine .js Datei aus, funktionieren die dann auf allen Seiten, ohne dass man auf jeder das onload Attribut im HTML hinzufügen muss.

L. G.
 
waldmannvonritter

waldmannvonritter

Nicht mehr ganz neu hier

AW: Überblendeffekt mit Java

sooo ... OnLoad funktion im script integriert ...
Code: 
        function Fader(einstellungen) {
            if (!einstellungen.id || !document.getElementById(einstellungen.id)
                || einstellungen.images.length < 2) {

                return new Boolean(false);
            }

            var i, original = document.getElementById(einstellungen.id);

            this.id = einstellungen.id;
            this.images = new Array();
            this.counter = 0;

            this.element = document.createElement("span");
            this.element.className = "fader";
            original.parentNode.replaceChild(this.element, original);

            for (i = 0; i < einstellungen.images.length; i++) {
                this.images[i] = document.createElement("img");
                this.images[i].src = einstellungen.images[i];
                this.images[i].alt = "Bild";

                if (i == 0) {
                    this.element.appendChild(this.images[i]);
                }
            }

            this.fade = function (step) {
                var fader = this, imgs = this.element.getElementsByTagName("img");

                step = step || 0;

                imgs[1].style.opacity = step/100;
                imgs[1].style.filter = "alpha(opacity=" + step + ")"; // IE?

                step = step + 2;

                if (step <= 100) {
                    window.setTimeout(function () { fader.fade(step); }, 1);
                } else {
                    imgs[1].className = "";
                    this.element.removeChild(imgs[0]);
                    window.setTimeout(function () { fader.next(); }, 2750); // Zeitinterwall
                }
            };

            this.next = function () {
                this.counter = (this.counter < this.images.length -1) ? this.counter +1 : 0;

                this.element.appendChild(this.images[this.counter]);
                this.images[this.counter].className = "next";
                this.fade();
            };
        }

        function Preloader () {
            var einstellungen = {
                id: "slideshow",
                images: ["slidebilder/opticom-slide-a-001.png", "slidebilder/opticom-slide-a-002.png", "slidebilder/opticom-slide-b-001.png", "slidebilder/opticom-slide-b-002.png", "slidebilder/opticom-slide-c-001.png", "slidebilder/opticom-slide-c-002.png", "slidebilder/opticom-slide-d-001.png", "slidebilder/opticom-slide-d-002.png"]
            };

            if (!window.meine_slideshow) {
                window.meine_slideshow = new Fader(einstellungen);
            }
            meine_slideshow.next();
        }

      window.onDomReady = initReady;
      
      // Initialize event dpending on browser
      function initReady(fn)
      {
          //W3C-compliant browser
          if(document.addEventListener) {
          document.addEventListener("DOMContentLoaded", fn, false);
        }
          //IE
          else {
          document.onreadystatechange = function(){readyState(fn)}
        }
      }
      
      //IE execute function
      function readyState(func)
      {
          // DOM is ready
          if(document.readyState == "interactive" || document.readyState == "complete")
          {
              func();
          }
      }

//execute as soon as DOM is loaded
window.onDomReady(onReady);

//do when DOM is ready
function onReady()
{
    Preloader();
}

// to compare which loader is shown earlier
window.onload = function() {
  Preloader();
}

nun nur noch das mit den bildchen regeln ... das wird net so einfach :lol:

gruß Tom
 
Myhar

Myhar

Hat es drauf

AW: Überblendeffekt mit Java

Das ist nicht so kompliziert. Hier mal ein schnelles, ungetestetes Grundgerüst:
Code: 
var images = new Array();
i = 12//Anzahl der Bilder
while (i--) {
images[i] = 'v4/images/opticom'+i+'.png';
}

So in etwa sollte das funktionieren ;-)

L. G.
 
waldmannvonritter

waldmannvonritter

Nicht mehr ganz neu hier

AW: Überblendeffekt mit Java

ja hammer ... gleich mal testen .. warum kompliziert wenns auch einfach geht .. ich hab das gleiche prinzip, nur "einbischen (so 40 zeilen mehr) " mehr geschrieben :D

thx gruß tom
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 115 (Mitglieder: 4, Gäste: 111)
Robots: 1.058

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben