Einfache Diashow

Einklappen
X
Einklappen
 
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige template Weiter
  • #1

    Einfache Diashow

    Hallo zusammen,

    ich versuche zur Zeit, eine einfache Diashow zu erstellen. Im Internet fand ich einen ähnlichen script, den ich für meine Bedürfnisse wie folgt umschrieb:

    Code:
    <!DOCTYPE html>
<html>
<body>
<style>
.slideshow-container
{
max-width: 300px;
margin: auto;
}

</style>

<div class="slideshow-container">
    <div class="mySlides">
        <img src="bild1.jpg" style="width:100%">
    </div>
    <div class="mySlides">
        <img src="bild2.jpg" style="width:100%">
    </div>
    <div class="mySlides">
        <img src="bild3.jpg" style="width:100%">
    </div>
</div>
<br>

<script>
let slideIndex = 0;
showSlides(0);

function showSlides(a)
{
let i;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++)
{
slides[i].style.display = "none";
}

if (a==0)
{
slideIndex++;
}

if (a==1)
{
slideIndex--;
}

if (slideIndex > slides.length)
{
slideIndex = slides.length
}

if (slideIndex < 1)
{
slideIndex = 1
}

slides[slideIndex-1].style.display = "block";
}
</script>
<div style="display:flex;justify-content: space-between; width:100px;"><div onclick="showSlides(1)">zurück</div><div onclick="showSlides(0)">vor</div></div>

</body>
</html>​

    Der script tat genau das was ich benötigte. Nun möchte ich aber, dass die Bildnamen aus einem array gelesen werden. Das funktioniert aber nicht. Könnt ihr mir helfen?

    Code:
    <!DOCTYPE html>
<html>
<body>
<style>
.slideshow-container
{
max-width: 300px;
margin: auto;
}
</style>
<div id="image-container"></div>
<script>
let slideIndex = 0;
showSlides(0);

function showSlides(a)
{
let i;
let slides = ["bild1.jpg","bild2.jpg","bild3.jpg"];
container = document.getElementById('image-container');
for (i = 0; i < slides.length; i++)
{
img = document.createElement('img');
img.src = slides[i];
container.appendChild(img);
}

if (a==0)
{
slideIndex++;
}

if (a==1)
{
slideIndex--;
}

if (slideIndex > slides.length)
{
slideIndex = slides.length
}

if (slideIndex < 1)
{
slideIndex = 1
}

slides[slideIndex-1].style.display = "block";
}
</script>
<div style="display:flex;justify-content: space-between; width:100px;"><div onclick="showSlides(1)">zurück</div><div onclick="showSlides(0)">vor</div></div>

</body>
</html>​


    Sorry, bin wirklich Anfänger

    Vielen Dank im voraus für Eure Hilfe


    Stichworte: array, diashow
  • #2
    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>​

    Kommentar

    • #3
      Zitat von Mr_Frost Beitrag anzeigen
      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>​
      ​

      Kommentar

      Vorherige template Weiter
      Lädt...
      X