JavaScript - Schieberegler für Bilder


1


<p>

<
input type="range" min="1" max="5" value="1" step="1"
 
onchange="showValue(this.value)">
</
p>

<
p>
<
img src="1.jpg" id="range" alt=""><br>
<
span id="number">1</span>
</
p>
 
<
script>
function 
showValue(newValue) {
 var 
bild="1.jpg";
 switch (
newValue) {
  case 
'1'bild='1.jpg'; break;
  case 
'2'bild='2.jpg'; break;
  case 
'3'bild='3.jpg'; break;
  case 
'4'bild='4.jpg'; break;
  case 
'5'bild='5.jpg'; break;
 }
 
document.getElementById("range").src=bild;
 
document.getElementById("number").innerText newValue;
}
</
script>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<canvas> Zeichnen

CSS - Animationen mit Keyframes

PHP - Zeichenkette einfach trennen

JavaScript - Zufallsfarbe ausgeben

MySQL - Datensätze auswählen

Leuchtende Navigation
Lassen Sie ihre Navigation dadurch leuchten, dass jeder sich zurechtfindet, Einer der wichtigsten Punkte ist dem Besucher den Weg zu seinen Informationen so schnell und einfach wie nur möglich zu gestalten. Um effizient arbeiten zu können, hilft es oftmals, sich in die Lage des Besuchers zu versetzen, denn der einzige Weg eine optimale Navigation für Ihre Webseite zu planen und zu entwerfen ist genauso zu denken, wie es ein typischer Besucher tun würde.