Beiträge von felix.

felix. · 1. Dezember 2019

Moin Moin,

ich habe jetzt schon ein bisschen länger nach einem funktionierendem kleinem & simplem Java Script Image Slider gesucht.

Ich wurde nun fündig und er funktioniert auch super. Mir würde es aber sehr sehr helfen, wenn jemand mir ganz kurz und knapp einmal die Funktionsweise erklären könnte. (Ich weiß ich bin ein totaler Noob)

Ich bedanke mich schonmal im Vorraus!

Code

var slideIndex = 1;

showDivs(slideIndex);

function plusDivs(n) {

     var y = document.getElementById("slide1");

     y.style.display = "none";.

    showDivs(slideIndex += n);

}

function showDivs(n) {

  var i;

  var x = document.getElementsByClassName("mySlides");

  if (n > x.length) {slideIndex = 1}

  if (n < 1) {slideIndex = x.length}

  for (i = 0; i < x.length; i++) {

    x[i].style.display = "none";

  }

  x[slideIndex-1].style.display = "block";}

Alles anzeigen

felix. · 10. November 2019

Zitat von DER

Zuerst einmal suchst du in JS ne Klasse die nicht existiert: var x = document.getElementsByClassName("myslider");

Habe ich kurz nach meinem Post gemerkt, aber hier vergessen zu ändern! Also ist geändert.

Zitat von DER

Dann sehe ich nicht wo Du plusDivs(); aufrufst.

Den Teil mit plusDivs(); hatte ich dummerweise auch nicht mit kopiert....

Nun ja, es hat trotzdem nicht funktioniert..., ich habe das ganze jetzt ein wenig anders gemacht. Jetzt funktioniert alles! Für interessierte:

Der HTML-Code:

Code

<div class ="slides">
    <div class="mySlides">
      <img src="images/bild1.jpg" style="width:100%">
      <div class="description">
         Hier könnte ihre Werbung stehen. (Bildunterschrift 1)
      </div>
    </div>

    <div class="mySlides">
        <img src="images/bild2.jpg" style="width:100%">
        <div class="description">
       Hier könnte ihre Werbung stehen. (Bildunterschrift 2)
    </div>
  </div>



   <button id="button1" class="button" onclick="plusDivs(-1)">&#10094;</button>
   <button id="button2" class="button" onclick="plusDivs(1)">&#10095;</button>
</div>

Alles anzeigen

Der Java-Script Code:

Code

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
     var y = document.getElementById("slide1");
     y.style.display = "none";
     
    showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

Alles anzeigen

felix. · 10. November 2019

Danke für die Antwort!

Das Problem ist, dass ich das ganze als Informatik Aufgabe aus dem Unterricht habe und ich es somit erklären muss.

Deshalb am besten so simpel wie möglich...

EDIT: Es ist auch besser ganz auf APIs/Erweiterungen zu verzichten.

felix. · 10. November 2019

Halli hallo,

ich bin gerade dabei einen Image & Text Slider zu schreiben. Allerdings habe ich im Moment das Problem, dass ich nur die Bilder wechseln kann und die Texte nicht.

Deshalb habe ich es jetzt so geändert, dass nichtmehr nur die Bilder gewitchet sondern die ganzen Klassen mit Bild & Text drin.

Hat jemand ne Idee warum es so nicht funktioniert und vlt. eine Lösung?

Liebe Grüße,

Felix!

Code

<div class="slider">
    <img id="slide1" src="images/filmag.jpg" style="width:100%">
    <p>text1</p>
  </div>
  <div class="slider">
    <img src="images/filmag.jpg" style="width:100%">
    <p>text2</p>
  </div>
  <div class="slider">
    <img src="images/filmag.jpg" style="width:100%">
    <p>text3</p>
  </div>
  <div class="slider">
    <img src="images/Kant-Kopf.png" style="width:100%">
    <p>text4</p>
  </div>

Alles anzeigen

Und mein JavaScript-Code:

Code

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
     var y = document.getElementById("slide1");
     y.style.display = "none";
     
    showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("myslider");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

Alles anzeigen

Beiträge von felix.

Simples Java Script Erklärung! Bitte helfen!

Mehrere JavaScript Funktionen in onClick HTML Variante benutzen?

Mehrere JavaScript Funktionen in onClick HTML Variante benutzen?

Mehrere JavaScript Funktionen in onClick HTML Variante benutzen?