Schieberegler mit Javascript, funktioniert fast, Hilfe!?

diarex5 · 29 November 2015

Folgendes problem: Ich habe mir einen Schieberegler mit Bild und Text zusammengebastelt. Zu jedem Bild gibt es einen Text. Wenn ich den Regler nun verschiebe, dann kommt das nächste Bild mit seinem zugehöhrigen Text drunter. Am Anfang ist nur Bild 1 zu sehen, soweit richtig, aber alle Texte werden unter dem Bild angezeigt. wenn ich den regler kurz verschiebe und wieder auf bild1 verschiebe, dann wird auch nur der dazugehöhrige (richtige) Text angezeigt Hoffe ihr versteht was ich meine. Hier der Code:

Code:

<html>
<head>
</head>
<body>
<p align="center">
<input type="range" min="0" max="5" value="0" step="1" oninput="showValue(this.value)" />
<p align="center"><img src="./images/bild1.png" id="range" alt=""></p>
<p align="center" id="p1">hi1</p>
<p align="center" id="p2">hi2</p>
<p align="center" id="p3">hi3</p>
<p align="center" id="p4">hi4</p>
<p align="center" id="p5">hi5</p>
<p align="center" id="p6">hi6</p>
<script type="text/javascript">
function showValue(newValue)
{
    var bild="./images/bild1.png";
   
document.getElementById("p1").style.display = 'block';
document.getElementById("p2").style.display = 'none';
document.getElementById("p3").style.display = 'none';
document.getElementById("p4").style.display = 'none';
document.getElementById("p5").style.display = 'none';
document.getElementById("p6").style.display = 'none';   
  
    switch (newValue)
    {
       case '0': bild='./images/bild1.png'; document.getElementById("p1").style.display = 'block';
document.getElementById("p2").style.display = 'none';
document.getElementById("p3").style.display = 'none';
document.getElementById("p4").style.display = 'none';
document.getElementById("p5").style.display = 'none';
document.getElementById("p6").style.display = 'none';          
       break;
       case '1': bild='./images/bild2.png'; document.getElementById("p1").style.display = 'none';
document.getElementById("p2").style.display = 'block';
document.getElementById("p3").style.display = 'none';
document.getElementById("p4").style.display = 'none';
document.getElementById("p5").style.display = 'none';
document.getElementById("p6").style.display = 'none';          
       break;
       case '2': bild='./images/bild3.png'; document.getElementById("p1").style.display = 'none';
document.getElementById("p2").style.display = 'none';
document.getElementById("p3").style.display = 'block';
document.getElementById("p4").style.display = 'none';
document.getElementById("p5").style.display = 'none';
document.getElementById("p6").style.display = 'none';          
       break;
       case '3': bild='./images/bild4.png'; document.getElementById("p1").style.display = 'none';
document.getElementById("p2").style.display = 'none';
document.getElementById("p3").style.display = 'none';
document.getElementById("p4").style.display = 'block';
document.getElementById("p5").style.display = 'none';
document.getElementById("p6").style.display = 'none';          
       break;
       case '4': bild='./images/bild5.png'; document.getElementById("p1").style.display = 'none';
document.getElementById("p2").style.display = 'none';
document.getElementById("p3").style.display = 'none';
document.getElementById("p4").style.display = 'none';
document.getElementById("p5").style.display = 'block';
document.getElementById("p6").style.display = 'none';          
       break;
       case '5': bild='./images/bild6.png'; document.getElementById("p1").style.display = 'none';
document.getElementById("p2").style.display = 'none';
document.getElementById("p3").style.display = 'none';
document.getElementById("p4").style.display = 'none';
document.getElementById("p5").style.display = 'none';
document.getElementById("p6").style.display = 'block';      
       break;
    }
    document.getElementById("range").src=bild;
}
</script>
</body>
</html>

Danke, für jede Hilfe
lg diarex5

Tronjer · 29 November 2015

Vielleicht, weil du im switch-case das default vergessen hast?

Bei Betrachtung deines Codes sollte dir auffallen, dass dieser zu gefühlten 90% redundant ist. Wenn du 50 Bilder einfügen willst, wird es dein Script auf 500 Zeilen aufblähen. Stammt das aus einem Uralt-Tutorial oder hast du es dir selber ausgedacht?

Das geht viel kürzer:

Etwas HTML und CSS, welches alle Bilder mit Ausnahme des ersten unsichtbar macht.

HTML:

<input class="my-slider" type="range" value="0" min="1" max="3">

<ul class="list-unstyled my-images">
    <li><img src="foo.png" alt=""></li>
    <li><img src="bar.png" alt=""></li>
    <li><img src="baz.png" alt=""></li>
</ul>

.my-images li img {display: none;}
.my-images li:first-of-type img {display: block;}

Und ein kleines Script, das alle Bilder durch eine Schleife schiebt und deren Position mit dem Value des Sliders mapped:

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.my-slider').on('input', function () {
  var nr = $(this).val() - 1;
  $('.my-images img').hide().each(function(key, value) {
    if (key == nr) {
      $(value).show();
    }
  });
});
</script>

Schieberegler mit Javascript, funktioniert fast, Hilfe!?

diarex5

Neues Mitglied

Tronjer

Senior HTML'ler

Neueste Beiträge