Einfache Diashow

**Mr_Frost** · 22-08-2025, 09:36

Habe jetzt die Lösung gefunden. Jetzt auch mit Beschreibung unter dem jeweiligen Bild

Code:

<script>
var aktuell = 0;
var bilder=["bild1.jpg","bild2.jpg","bild3.jpg"];
var text=["Sonne","Mond","Sterne"];
var max=bilder.length-1;

function vor()
{
aktuell++;
if (aktuell>max)
{
aktuell=0;
}
document.getElementById("anzeige").src = bilder[aktuell];
document.getElementById("beschreibung").innerHTML = text[aktuell];
}

function zur()
{
aktuell--;
if (aktuell<0)
{
aktuell=max;
}
document.getElementById("anzeige").src = bilder[aktuell];
document.getElementById("beschreibung").innerHTML = text[aktuell];
}
</script>

<div align="center">
<img id="anzeige" src="bild1.jpg" style="width:300px; height:200px;">
<div id="beschreibung" style="width:300px; text-align:center;">Sonne</div>
<div style="display:flex;justify-content: space-around; width:300px;padding-top:50px; cursor:pointer;"><div onclick="zur()">zurück</div><div onclick="vor()">vor</div></div>
</div>

**Agra** · 28-09-2025, 18:05

Originally posted by Mr_Frost View Post

Habe jetzt die Lösung gefunden. Jetzt auch mit Beschreibung unter dem jeweiligen Bild.

Ihre Navigationslogik für die Schaltflächen ist in zwei separate Funktionen aufgeteilt (vor und zur). Sie können dies vereinfachen, indem Sie sie in einer einzigen Funktion zusammenfassen, die ein Argument für die Richtung entgegennimmt – ähnlich wie bei Ihren ersten beiden Versuchen. Das Ergebnis wird übersichtlicher sein!

Hier ist Ihr finales, funktionierendes Skript, leicht umgestaltet für mehr Einfachheit und bessere Praxis:

HTML Code:

<html>
<head>
    <style>
        /* Optional: Center the content */
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>
<body>

<div align="center">
    <img id="display" src="image1.jpg" style="width:300px; height:200px;">
    <div id="description" style="width:300px; text-align:center;">Sun</div>

    <div style="display:flex; justify-content: space-around; width:300px; padding-top:20px; cursor:pointer;">
        <div onclick="changeSlide(-1)">back</div>
        <div onclick="changeSlide(1)">forward</div>
    </div>
</div>

<script>
    // Define your content arrays
    const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
    const text = ["Sun", "Moon", "Stars"];
    let current = 0; // Start at the first image (index 0)

    // Function to change the slide
    function changeSlide(direction) {
        // 1. Calculate the new index
        // The modulo operator (%) handles wrapping around the array
        // (a + b) % c is a safe way to handle circular arrays.
        const max = images.length;
        current = (current + direction) % max;

        // 2. Handle negative numbers from the modulo (if direction is -1)
        if (current < 0) {
            current = max - 1;
        }

        // 3. Update the display elements
        document.getElementById("display").src = images[current];
        document.getElementById("description").innerHTML = text[current];
    }
</script>

</body>
</html>

Einfache Diashow