bitte dringend hilfe bei diashow slideshow

karliisback · 20.02.2015

hallo leute ich habe folgendes script:

Code:

    <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, 2000);
            }
        }

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

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

            counter++;

            if (counter < imgs.length) {
                fade();
            }

};

    </script>
    <style type="text/css">
        .next { position: absolute; top: 0; left: 0; opacity: 0; filter:alpha(opacity=0); }
        #meinFader { position: relative; }
    </style>

Code:

<body onload="next()">

<p id="meinFader">
        <a href=""><img src="img1.png" alt=""></a>
        <a href=""><img src="img2.png" alt="" class="next"> </a>
        <a href=""><img src="img3.png" alt="" class="next"></a>
        <a href=""><img src="img4.png" alt="" class="next"> </a>
        <a href=""><img src="img5.png" alt="" class="next"></a>
    </p>
    <p><a href="javascript:next()">Slideshow starten</a></p>

</body>

jedoch hält die diashow beim letzten bild. ich möchte dass sie automatisch von vorne anfängt, also eine langlaufschleife. das dürfte einfach zu managen sein, aber ich kenne mich nciht so gut aus.

wie mache ich das?

greeezz

Enigmon · 20.02.2015

Zum Lernen ist dieses Video und folgende ideal:

karliisback · 21.02.2015

sorkannst du mir nicht einfach sagen welche stelle ich ergänzen muss. das video ist nett gemeind, aber mein englisch reicht nicht aus dafür.

ich hbas damit versucht:

Code:

if (counter < imgs.length) {
    fade();
} else {
    counter = 0;
    fade();
}

das funktioniert aber nicht

Schulli · 21.02.2015

Nicht jammern, ein bisserl schauen und nachdenken! Zwischen Zeile 29 und 30 das Fehlende ergänzen.
Ich staune immer wieder, gross mit Computern rum machen wollen und bei ein bisschen Englisch hakts dann. Leute, Leute :oops:

Enigmon · 21.02.2015

Wenn alle durchsichtig werden was soll dann eingeblendet werden??

Code:

function next() {
            var imgs = document.getElementById("meinFader").getElementsByTagName("img");
           
            if (typeof(counter) != "number") {
                counter = 0;
            }
            counter++;
            if (counter < imgs.length) {
                fade();
            }else{
                for(i=0;i<imgs.length;i++){
                    imgs[i].style.opacity = 0;
                }
                counter=0;
                fade(0);
            }
        };

karliisback · 21.02.2015

hey enigmon vielen dank jetzt klappt es.

und meister des guten geschmacks was laberst du mit groß rummachen wollen, weil ich ne diashow haben will. so ne beschissene antwort hättest du dir sparen können

karliisback · 21.02.2015

wie mache ich das, dass die bilder nicht so schnell wechseln?

karliisback · 21.02.2015

und ich wollte die bilder verlinken, aber der link verweist bloß zur adresse des letzten bildes. jedes bild soll einen eigene verlinkung haben. geht das?

Enigmon · 21.02.2015

1. Schulli hatte dir nen guten Hinweis gegeben und ihn anmaulen kommt gar nicht gut.
Ich denke mal, dass es einfach seine Art ist.

2. Bilderwechsel:
in der fade()-Funktion Original Zeile 15 Timeout vergrössern:

Javascript:

window.setTimeout(next, 5000);

3. Verlinken
Schwieriger in der Form. Du hast ja eigentlich alle Bilder übereinander liegen und sie verschwinden ja nicht.
Also ist beim Klick immer nur das letzte Bild/Link (img5.png) oben, nur halt durchsichtig und das bedeutet nur der Link kann angeklickt werden.