Website nur aus nur 10 Bildern (Slideshow, Mousewheel)

Hallo,

ist es möglich eine Website die nur aus 10 Bildern besteht und mit dem Mausrad durch gescrollt werden kann zu bauen?

Das heißt,

wenn die Website geöffnet wird soll im Fullscreen das erste Bild angezeigt werden.
Das würde ich auch noch hinbekommen.
Das heißt es wird also nur ein Bild geladen.
Wenn der User nun am Mausrad dreht soll das zweite Bild geladen werden usw.
Quasi wie ein Daumenkino.
Und wenn alle Bilder durch sind wieder zum ersten springen.

Quasi 10 Vollbilder die per Mausrad durch gescrollt werden.
Es soll aber kein einschieben oder ähnliches stattfinden.
Der Bildwechsel soll sofort sichtbar sein.

Wie könnte ich (mit wenig programmier Erfahrung) so etwas umsetzen?
Eine Website mit einem Vollbild bekomme ich noch hin.
Aber dann die Bilder per Mausrad wechseln wird schon schwieriger.
Nutzt man da Javascript?

Würde mich sehr über Antworten freuen.
 
Wenn die Bilder durchnummeriert sind, geht's z.B. so:

HTML:
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="http://ddragon.leagueoflegends.com/cdn/6.9.1/img/profileicon/0.png" width="200" height="200">
<p id="ind">0</p>
<script>

document.getElementById("myImage").addEventListener("wheel", changeImage);
var i = 0;
var url = "http://ddragon.leagueoflegends.com/cdn/6.9.1/img/profileicon/";
function changeImage() {
    var image = document.getElementById('myImage');
    var p= document.getElementById('ind');
    i++;
    i = i%10;
    image.src = url+i+".png";
    p.textContent =i;   
}
</script>

</body>
</html>
ansonsten kann man ja die urls in ein array abspeichern, aber das darfst du selbst googlen :)
 
Passende Stellenanzeigen aus deiner Region:

Neue Themen

Oben